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

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!
-tony

@creedon That did the trick. Thank you so much! ❤️

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

https://www.soonaetark.com/about

Thank you for any help on this. 

2 hours ago, James29 said:

But on a different site we are working on it is not having an effect and the header continues to move.

If you are looking for a fixed header have you consider using the built-in feature?

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! 

10 minutes ago, James29 said:

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.

Remove my code. When it is removed the header is absolutely solid.

Got it! Thanks!!!

We made some adjustments on our side. Not sure what changed but we hadn't removed your code. Once gone, banner is solid. Thanks a bunch! All is working.

@creedon Hello, does this code still work as a solution for this? I can't seem to make it work on my end. I inputted the code via the following steps: 

Home > Website Tools > Custome CSS

I've also tried to apply the code on a single page, but still didn't work. Any update on this will be greatly appreciated! 

Thank you! 

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

4 minutes ago, Ampm97 said:

Hello, does this code still work as a solution for this?

I don't know. I'd have to see to code in the site. SS is changing things all the time so it may not work anymore.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.