I am currently using the debut theme. I added a fixed header so the navigation bar stays when i scroll down the page.
The navigation bar scrolls down perfectly both on desktop and mobile.
However, when I click on my "hamburger" style menu on Mobile after scrolling down, it loads the menu at the point I was on the page and send me back up to the top of the page. A white space of the size of the menu is added to the top of the page. When I scroll back down to find the menu, it is behind my content and I cannot click on any links.
How can I make the menu appear properly once I have scrolled down the page?
The following code was used to add a fixed header to my website :
By the way, here is my mobile nav wrapper code!
/*================ Mobile nav wrapper ================*/
@include transform(translate3d(0, -100%, 0));
border-bottom: 1px solid $color-border;
We recently implemented a sticky nav bar on the Debut theme that will auto-hide on scroll down and re-appear on scroll up. It's really simple, and we hope it will be helpful to some of you!
Thanks for your answer, I am having the same problem.
I tried your code but now my header menu bar sits fixed in the middle of the website and not up to the top as I would like that to be.
Could you please help me further?
My shop: https://brazilborn.com.au/
Thanks a lot.
As an Official Shopify Expert and Partner We would be happy to help you.
Please reach us at:
Thanks & Regards
MS Web Designer Team
Official Shopify Expert and Partner