How to Hover dropdown menu in Debut?

Highlighted
Tourist
7 0 4

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!!

2 Likes
Highlighted
Shopify Staff
Shopify Staff
205 1 45

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 

4 Likes
Highlighted
Tourist
3 0 2

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

2 Likes
Highlighted
Tourist
3 0 2

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


2 Likes
Highlighted
Tourist
6 0 1

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
Highlighted
Excursionist
11 0 1

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

1 Like
Highlighted
Excursionist
11 0 1

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

0 Likes
Highlighted
New Member
4 0 0

This is not workin 2019

0 Likes
Highlighted
New Member
4 0 0

And after I removed the code my site is messedup

0 Likes
Highlighted
New Member
2 0 1

Just add this code
" .site-nav__dropdown { top: 30px; } "

above the line : 

.site-nav__dropdown--right:not(.site-nav__dropdown--centered) {
right: 0;
left: unset;

 

Hope it'll work for you too as I was having the same problem :) 

 

1 Like