How would you set a fixed or sticky global header.

With any upfront Child theme, how would you set a fixed or sticky global header.

That is the fixed or sticky global header would remain at the top of the screen while a user scrolls down the page?

For instance here, on the very top is a fixed header,
blog.teamtreehouse (dot) com/fixed-headers-and-navigation-bars-used-in-web-design

Or redantler (dot) com with out the hard scroll

A space at the top of the screen while a user scrolls down the page?

  • Adam Czajczyk

    Hello @Biz Builder Mike,

    I hope you're well today and thank you for your question!

    The simplest way to do this would be to use custom CSS rule. First you will want to find out an ID or class name for an element you want to make "sticky". Here's a handy guide on how to do this (that's for Chrome browser but will work pretty much the same way in Firefox):

    https://developer.chrome.com/devtools#dom-and-styles

    For example, an element has a class of ".main-menu". The CSS code then would be:

    .main-menu {position:fixed;top:0;left:0;}

    To add that code to Upfront's CSS enter Upfront editor and then

    - click on "Theme settings" in left panel
    - click on "add custom css rule"
    - add the code inside an editor that pops-up at the bottom of the screen
    - save that editor and save Upfont.

    I hope that helps!

    Best regards,
    Adam