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: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.
