Shopify themes, liquid, logos, and UX
Hi! I'm looking to change the header on my site to be a sticky header with the navigation bar and not move when scrolling up or down. How could I do that?
www.vinylfoxusa.com
Password: VINYL2024!
Hey @dtffox
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
div#site-header-nav {
margin-top: 0 !important;
}
button.site-header-menu-toggle {
display: none !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello, this worked to make the navigation bar sticky and hide the menu button when scrolling. Although, when you scroll down the top part of the header still shifts to the right and basically makes room for the hidden button. Is there a way to make the whole header stay the same when scrolling and not shift at all?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024