How to add Hover Effect on Main Navigation Bar In Shopify

 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); 

       }); 

     }); 

 

Show Less

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.