Shopify - Menu Mouse Hover

Online Store > Themes > More Actions (Current theme) > Edit Code > Assets > theme.scss.liquid. 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; }

This second one could also be edited around line 2257.

You also need to disable double-clicking for parent menus by going to theme.js and commenting out the following: 

cache.$parents.on('click.siteNav', function(evt) {
      var $el = $(this);

      if (!$el.hasClass(config.activeClass)) {
        // force stop the click from happening
        evt.preventDefault();
        evt.stopImmediatePropagation();
      }

      showDropdown($el);
    });

Once disabled it should look like: 

/* cache.$parents.on('click.siteNav', function(evt) {
      var $el = $(this);

      if (!$el.hasClass(config.activeClass)) {
        // force stop the click from happening
        evt.preventDefault();
        evt.stopImmediatePropagation();
      }

      showDropdown($el);
    });
*/

After saving all changes, you'll be able to hover a menu item and have it drop down without having to click. 

Để lại một bình luận