How to add Hover Effect on Main Navigation Bar In Shopify – EcomExperts
Shopify Blog

How to add Hover Effect on Main Navigation Bar In Shopify

Andrew Durot
8 min read

You can easily learn to add the Hover effect on the main navigation bar in Shopify using this code through this tutorial. 

Using the hover effect, customers can easily find their way around your Shopify store, navigating through the main navigation bar. 

Here’s how to add How to add Hover Effect On Main Navigation Bar In Shopify:

Add Hover Effect on Main Navigation Bar 

Step 1: make a duplicate of your current live theme

From your Shopify admin go to the Online Store and then click on Themes. To be secure we recommend you make a duplicate of your current live theme.

Click on Actions and from the drop-down menu choose duplicate. Once the duplicate is made, click on Actions in your new duplicated theme and choose Edit code.  

Step 2: Assets directory

From the navigation menu to the left, scroll down to the Assets directory and click on theme.scss.liquid or something with a similar name.

A new window should appear on the right side of the code editor. Add the following code to the bottom of this stylesheet:

    .site-nav--has-dropdown:hover .site-nav__dropdown, 
 .site-nav--has-dropdown:focus .site-nav__dropdown { 
   display: block; 
 } 
 .site-nav__dropdown { top: 30px; } 

Step 3: Disable double-clicking

You also need to disable double-clicking for parent menus by going to theme.js in Assets directory and add /* at the beginning and at the end paste the */ of the following piece of code:

 cache.$parents.on('click.siteNav', function() { 

       var $el = $(this); 

       $el.hasClass(config.activeClass) ? hideDropdown($el) : showDropdown($el); 

     }); 

   

     // check when we're leaving a dropdown and close the active dropdown 

     $(selectors.siteNavChildLink).on('focusout.siteNav', function() { 

       setTimeout(function() { 

         if ( 

           $(document.activeElement).hasClass(config.childLinkClass) || 

           !cache.$activeDropdown.length 

         ) { 

           return; 

         } 

   

         hideDropdown(cache.$activeDropdown); 

       }); 

     }); 

 

Click Save.

Step 4: Check if everything is working properly

Go to your store and give yourself a big pat on the back.

This 4-step guide would help you with adding a hover effect to the main navigation page of your Shopify store. Be sure to contact us at Ecom Experts for any other Shopify coding tutorial you might need. 

 

Leave a comment

About Andrew Durot

He is the co-founder of Ecom Experts, a Shopify focused development agency. 

Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.

Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.

Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!

Check Your Speed

Guides

Leave a comment