4 Steps to Create a Sticky Header on Shopify: DIY Code
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.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
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!
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
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!