York: Create fixed header.

Hi, I've used this CSS to create a fixed header with a black background:

#header { 
  position:fixed; 
  z-index: 1;
  background-color: black;
  padding-top: 40px;
  width: 100%;
  padding-bottom: 40px;
}

The head fixes great but it drops by some 40 pixels so the content beneath appears above it... what am I doing wrong? I need to push the header back to the top of the page!

Thanks.C

You're almost there @cmeadmore. It's hard to help without a link to your site, but this should get you started.

First, on the original code you provided, you need to change the margin value to push the header to the top of the page. So it should look like this:

#header { 
   position:fixed; 
   z-index: 1;
   background-color: black;
   padding-top: 40px;
   width: 100%;
   padding-bottom: 40px;
   margin-top: 0px;
 }

And second, copy/paste this into the Design > Custom CSS panel, to push the page content below the header. You can change out the '87px' for whatever looks good on your site.

@media only screen and (min-width: 760px) {
   .site-page {
       padding-top: 87px !important;
   }
}

(The '@ media' callout just ensures your page content won't be pushed down on mobile devices)

Got this to work great but my banner descriptions seem to be scrolling over top of my navbar now while the content scrolls behind. Any ideas how to fix this?

Got this to work great but my banner descriptions seem to be scrolling over top of my navbar now while the content scrolls behind. Any ideas how to fix this?

Almost works! My banner covers my nav and I have to scroll down to see it after the banner is out of frame. Any way to force the nav contents to the top?

Thanks,Alex

Hi guys!
I need this answer too ❤️
Anyone could help?

12 hours ago, apple_pie777 said:

Hi guys!
I need this answer too ❤️
Anyone could help?

Add to Home > Design > custom CSS

header#header {
    position: fixed;
    left: 0;
    right: 0;
}
main#page {
    margin-top: 100px;
}

Hi all. Trying to implement the code options above but the space between the header and content ends up being different on various pages. Any ideas? Thanks. 

On 10/1/2020 at 6:24 PM, dgirardi said:

Hi all. Trying to implement the code options above but the space between the header and content ends up being different on various pages. Any ideas? Thanks. 

Can you share site url? We can check easier.