Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

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

 

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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;
}

 


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

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?

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...