Jump to content

How do I remove shrink/scroll from my site header?

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://www.wahlumacademy.com/about

I've checked on Mac OS 10.17.5 using Firefox and Chrome.

I noticed that when I scroll down the page (or any page on the site), the header appears to scroll a pixel or two. If I scroll back to the top, it moves back in place. One of the other people working on the website said the shrink class is being automatically added when this happens. Looking at inspect shows this.

Can someone please take a look at our website and tell me how to fix it so the header doesn't move when a page is scrolled? No problem if we have to add some CSS. I just need to know what is causing this.

Thank you!

Edited by ynoteel
Link to comment
  • Solution

Add the following to Design > Custom CSS.

.tweak-fixed-header:not( .sqs-edit-mode-active ):not( .sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {

  padding-bottom : 2vw;
  padding-top : 2vw;

Let us know how it goes.

The cause of the issue is this is an SS built-in effect for the header.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...

I had a similar issue on my site and I applied this fix mentioned above and it also worked.

But on a different site we are working on it is not having an effect and the header continues to move. I feel it's because of additional CSS we have in place for the pages but I can't pin point the issue. Here is an example page (though all pages in the site have the same behavior)  showing the header moving when it's scrolled



Thank you for any help on this. 

Link to comment

Hi, yes, we have this option set as in your screen shot (fixed/basic) and we still see the header bounce slightly when scrolling occurs. It's as if the content pushes the header up slightly. We're checking to see if something we did is causing this . Thanks for the checking back. Appreciate that! 

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.