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

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.

Shopify show dropdown 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

Edit theme code in Shopify Debut Theme

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

Edit CSS to show dropdown hover Debut Theme

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

Disabled jquery click parent menu action in Debut Theme

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.

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

  1. I followed your tutorial and everything worked out… except for one thing. The drop down menu wouldn’t stay open for me to be able to click on anything. I ended up having to remove the code. I hoped it would work!

    1. You can add this css line to make dropdown background color white.

      .site-nav__dropdown {
      background: #fff;
      }

      By the way, with your shop, please use

      .site-nav__dropdown {
      top: 30px;
      }

      to prevent issue when hover to main nav but can not select dropdown

  2. I did all your steps, but now my website version does not work properly and in my normal version it does not work as well. WHen I click on menu does not stays. The drop menu goes back. How do I fix??? Now i cannot go back to old version

    1. Just find exactly code by line mentioned on my tutorial, revert them back.
      1. Remove CSS added in Step 2: Edit theme.scss.liquid file
      2. Uncomment JS code in Step 3: Edit theme.js.liquid file

  3. I followed your tutorials but it didn’t seem to work for my store. I am not sure if I have missed something or if my original collection set up is wrong? Would you be able to have a look for me please?

    1. There must be some code edited in your Debut theme. My demo site works just fine. And it uses default Debut theme from Shopify Theme Market.
      By the way, I can take a look if you leave your shop url

Add Comment