Jump to content

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

Go to solution Solved by Beyondspace,

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

Edited by Ugne
grammar
Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.