How to Hover dropdown menu in Debut?

Tourist
7 0 3

I'm using the Debut theme... i dont like the dropdown, only when i am clicking on the menu it open the dropdown menu, there is a option to just go over the menu with the mouse and it will open up dropdown menu without clicking?

I guess what I really want is to show the dropdown as you hover, not on click - is there anyway to do that??

Thanks in advance!!

1 Like
Shopify Staff
Shopify Staff
205 1 31

Hello, Idan. 

Leon here from Shopify Support.

Thanks for your question! There is a relatively easy way to change your menu in Debut theme to display dropdown menus on hover instead of the default click-to-open.

To make this change, you'll need to access your theme's CSS stylesheet by going to 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. 

Have a great one!

Leon 

2 Likes
New Member
1 0 1

Hello

Thanks for your help

I am new to Shopify 

I tried what you posted and it worked on my home page. However, something is off when I try to log in and try the hover drop down in the member's area.

It still shows the menu when I hover but I have to click to keep it so I can get to the options on the list 

If I log out the problem disappears

need help

1 Like
New Member
1 0 1

Hi I did this too and the hover worked but disappears as soon as you move your cursor to to navigate it.


1 Like
New Member
6 0 0

Thank you for your timely help. I been breaking my head on shopify since am new user with no technical bg, Thanks again. 

0 Likes
Tourist
8 0 0

After applying the changes, the menu opens on hover. The issue not is when trying to access to the items, the menu closes without being functional

0 Likes
Highlighted
Tourist
8 0 0

It seems that after some time it started to work all right

0 Likes