Fixed header! HELP!

I just can't seem to make this work!

All I am trying to do is make the whole header area (Announcement Bar + Header (Logo, Navigation, Shopping Cart, etc.) stay visible at the top of each page.

HELP

Site is www.justgoodjuju.com

I see you fixed this?

I see you used position: fixed

but you can also position: sticky, I think it will better 😂

header.Header.Header--top {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

Thanks!

So I did as you suggested:

header.Header.Header--top {
      z-index: 9998;
      position: sticky;
    position: -webkit-sticky;
    top: 0;
       background-color: hsl(26, 36%, 92%);
}

But now I am getting a white stripe below the header and above the banner image.  All images have the following:

.image-block
{
  width:100%;    
  padding-top:0 !important;  
  padding-left:0 !important;
  padding-right:0 !important;
}

I can't seem to work out where the white stripe is coming from as the image is right at the top of the page.

Any ideas?

15 hours ago, Simon-JustGoodJuju said:

 

 

Add to Home > Design > Custom CSS

.Main-content {
    padding-top: 0;
}

That did it - thanks!