You may have seen in other Shopify stores that the menu or header follows you even as you scroll down the page. This is what’s called a sticky menu or sticky header. By default, you have a static menu or header, which means as you scroll down the page, the menu or header disappears.
Why would you want a sticky menu or sticky header (also called sticky navigation)? According to Hyrum Denney, a website design expert, sticky navigation is linked to a 22% increase in speed of use. Because people spend so much time on the internet, 22% comes out to one or more hours daily. The study’s subjects found sticky navigation more appealing than static navigation. So sticky navigation saves the individual time and is more user-friendly.
If you want a sticky menu, sticky header on scroll, it’s easy to do. It just involves copying and pasting some CSS and JavaScript code into your store.
This sticky menu Shopify tutorial will show you how to make a sticky header bar. Follow these steps to accomplish your goal quickly.
How to Make Header Sticky in Shopify
Step 1: Duplicate your current live theme
From your Shopify admin, go to the Online Store and then click on Themes. To be secure, we recommend you duplicate your current live theme.
Click on Actions and from the drop-down menu choose Duplicate. Once the copy is made, click on Actions in your new duplicated theme and choose Edit code.
Sticky Header Shopify Code
Step 2: Assets directory
From the navigation to the left, scroll down to the Assets directory. Click on theme.scss.liquid, and a new file should open on the right side of the code editor. Paste the code from the instructions file to the end of this stylesheet and click on Save.
#SearchDrawer {
z-index:1001;
}
#shopify-section-header {
position: fixed;
z-index:1000;
left:0;
right:0;
-webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
background-color: {{ settings.color_body_bg }};
}
#PageContainer {
padding-top: 80px;
}
@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}
Step 3: Theme.js file
In the same Assets folder, click to open your theme.js file.
Go to the very bottom of this file and paste the following code:function headerSize() {
var $headerHeight = $('div#shopify-section-header').outerHeight();
$('#PageContainer').css('padding-top', $headerHeight);
}
$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));
Ensure that the code was copied exactly from instructions and pasted correctly, making sure no characters or symbols are missing.
Save the file by using the button on the top right-hand side.
Refresh your online store page and verify that the sticky header is working correctly!
Step 4:
Go to your store and give yourself a big pat on the back.
Sticky Menu on Scroll Shopify
This has been a sticky header Shopify Tutorial. You should now have a sticky menu on scroll. Having a sticky menu or anything on scroll makes for a more user-friendly Shopify store. A sticky header Shopify or sticky menu Shopify means your customers can navigate easily and quickly to where they want to go in your store.
For added context on how to make a sticky header, see the Ecomexperts video on YouTube with longterm Shopify expert Andrew Durot. As always, if you have questions, feel free to contact us.
1 comment
Thank you so much for this tip! It works perfectly except for when i view individual products in desktop. Since the product information is also sticky, it gets placed on top of the menu. I’m using the Brooklyn Theme.
Would be extremely thankful for help with this issue!