How to create a fixed/sticky navigation bar for your Shopify store
A sticky nav bar, or a fixed navigation bar on your website can help users get around much quicker. This can drastically enhance the user-experience, especially for websites that have a lot of scrolling. Normally, users need to scroll all the way back to the top of a website to get back to the main navigation. Being that the navigation is one of the most important elements of the website, why shouldn’t we make it more accessible?
In this article , we’ll learn how to create a fixed/sticky navigation bar for your Shopify store.
There are lots of jQuery plugins we can use to display a sticky navigation. But I think Sticky is the best and easiest plugin.
Step 1: Download Sticky jQuery plugin
First, you must download the Sticky jQuery plugin here. After download you will have a js file: jquery.sticky.js.
Step 2: Upload Sticky jQuery plugin to Shopify
Log in to your Shopify store. From your Shopify admin, go to Online Store > Themes. Click Actions > Edit code.
In the Assets directory, click Add a new asset. In popup appear: click onto Upload a file to upload the file.
Step 3: Include Sticky
Under the Layout folder, locate and click the theme.liquid file to open it in the online code editor.
Include the script after loading jQuery library.
1 2 3 4 5 6 | {{ 'jquery.sticky.js' | asset_url | script_tag }} <script> $(document).ready(function(){ $("#nav").sticky({topSpacing:0}); // #nav is ID of navigation bar. }); </script> |
You are done.
Actually, you may need adjust CSS to customize style for the sticky navigation bar.
