Hi everyone, I am Luke Tran, I am a freelancer worked mainly in Shopify. I works with many clients and one of the best free theme I often work with is Debut theme from Shopify.

Today I would like to talk about a small tip in tweaking this theme. This theme, in my opinion is a great starter theme with multi Homepage section, clean and neat code, 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.

I myself and many clients of mine too does not like this function, I write this post to share the most simple way to make dropdown showing on hover.

How to show drop down menu on hover in Shopify Debut Theme

1. Edit CSS

The very first step is editing css in Debut theme. From Shopify Dashboard, navigate to your Theme editor

Step 1: Access theme editor

Step 2: Edit theme.scss.liquid file

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

Like this below screenshot

Step 3: Edit **theme.js.liquid **file

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

Same like this screenshot

Conclusion:

That’s all, you can see my live theme example here. Hope that my detail tut can help you a little in launching your shop. Please fell free to contact me if you have any issue in trying this.

Thank you all for reading my tutorial.