Shopify Debut Theme: Show Drop Down Menu on Hover

I recently opened up a Shopify store for a new small business, Print A Pot. It is using the free Debut theme, which is a great starter theme with a module-building homepage, easily customizable settings, and high quality image-handling. However, the dropdown menus’ behavior was less than stellar: you had to click on the dropdown parent link to open the dropdown menu.

There are some tutorials on how to show the drop down menu on hover, but none of these accounted for one simple thing…clicking on the parent link itself!

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.

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

The following snippet has to overwrite the existing value, so adding this to the end of your stylesheet should do it (or you can edit the value at around Line 2270):

.site-nav__dropdown { top: 30px; }

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 (around Line 797):

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.

You can now test that you can open a parent menu item without a double click, and hovering over a parent menu link will open its dropdown.

0 comments on “Shopify Debut Theme: Show Drop Down Menu on HoverAdd yours →

Leave a Reply