How to create a fixed/sticky navigation bar for your Shopify store

Hura Product Showcase Builder

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.

DEMO

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.

You are done.

Actually, you may need adjust CSS to customize style for the sticky navigation bar.

DEMO

Hura Theme Blocks

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *