I recently got a new eCommerce website development project where my client wanted to start up a Shopify store for a new small business, EquiPetx.

I selected Shopify as an eCommerce Platform and started the build using the free Debut theme.

Which is a really good Shopify e-commerce theme with a module-building professional homepage, easily customizable settings, and high-quality image-handling.

But, the dropdown menus’ behavior was less than stellar: I had to click on the dropdown parent link to open the dropdown menu.

For example, if you had a “Shop” as a dropdown parent link that linked to a page with all of your Shopify collections, you had to click the link twice just to navigate to the Shop page. Not exactly the most user-friendly behavior.

But I wanted to Show Drop Down Menu on Hover Instead of Click. Though I got some tutorials on how to show the Drop Down Menu on Hover Instead of Click, none of these accounted for one simple thing…clicking on the parent link itself!

Finally, I discovered the easy and simple process and here I am going to share my easy process so that you have not to hire any developer to fix this problem.

Step 1: Show Drop Down Menu on Hover

To get started, you first need to be able to show the Debut drop down menus on hover instead of click. Go to your Themes page and navigate to Edit HTML/CSS of your Debut theme. Expand your Assets folder and click on theme.scss.liquid.

Add the following to your stylesheet:

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

.site-nav__dropdown { top: 30px; }

Note: You may have to adjust the 30px value to the value that best suits your theme customizations!

Press Save.

Step 2: Disable double-click for parent menu items

After saving your stylesheet, open up theme.js Look for the following code so that it can be commented out.

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

You comment out Javascript by wrapping it like so:

/* 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);
    });
*/

Click Save.

Need any more support? Contact with Me.