Jump to content

How to remove the gap between the top of the page and the sticky header on Brine/Foster?

Recommended Posts

Site URL: http://www.woollyhoody.com

Hi, I've used a CSS code to make the top header sticky but there is a gap between the top of the page and the header when I scroll. How do I make the gap disappear?

I've used the following code to make the header sticky:

.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
}

@media screen and (min-width: 641px) {
  .Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main {
    padding-top: 81px;
  }
  .Intro + .Main {
    padding-top: 0px;
  }
}

Link to comment
  • Replies 4
  • Views 2.8k
  • Created
  • Last Reply
43 minutes ago, Ugne said:

Site URL: http://www.woollyhoody.com

Hi, I've used the following code to make the top header sticky but there is a gap between the top of the page and the header when I scroll. How do I make the gap disappear?

I've used the following code to make the header sticky:


.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
}

@media screen and (min-width: 641px) {
  .Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main {
    padding-top: 81px;
  }
  .Intro + .Main {
    padding-top: 0px;
  }
}

Please provide your site password

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
9 minutes ago, Ugne said:

The password is:  staywarm

update this header style

.Header {
    position: fixed !important;
    z-index: 1000;
    width: 100%;
    top: 0;
}

image.thumb.png.272a3ec10ad4280d2155a88915255196.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.