ynoteel Posted October 3, 2022 Share Posted October 3, 2022 (edited) 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 Edited October 3, 2022 by ynoteel Link to comment
Solution creedon Posted October 3, 2022 Solution Share Posted October 3, 2022 (edited) 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 October 3, 2022 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
ynoteel Posted October 3, 2022 Author Share Posted October 3, 2022 @creedon That did the trick. Thank you so much! ❤️ creedon 1 Link to comment
James29 Posted October 18, 2022 Share Posted October 18, 2022 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. Link to comment
creedon Posted October 18, 2022 Share Posted October 18, 2022 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? Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
James29 Posted October 18, 2022 Share Posted October 18, 2022 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
creedon Posted October 18, 2022 Share Posted October 18, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
James29 Posted October 18, 2022 Share Posted October 18, 2022 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 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment