FROM CACHE - en_header

How to Hover dropdown menu in Debut?

Idan_Senejebi
Tourist
7 0 5

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

Replies 37 (37)
Leon
Shopify Staff (Retired)
Shopify Staff (Retired)
205 1 72

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 

Leon | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

HadyK
Tourist
3 0 3

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

Ammez
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.


TBD19
Tourist
6 0 2

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

Raulfj
Excursionist
11 0 2

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

Raulfj
Excursionist
11 0 2

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

sativa
New Member
4 0 0

This is not workin 2019

sativa
New Member
4 0 0

And after I removed the code my site is messedup

AhmedShoaib
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 🙂 

 

sativa
New Member
4 0 0

Thanks for this, but this did not work. 🙂

Raulfj
Excursionist
11 0 2
In my case, it took about 24 hours to start working. I do not know why, and
on that time I had already decided to add a menu app (Buddha menu)
sativa
New Member
4 0 0

Ahh I see ok I will do the change and see how it will wotk after 24 hours. Thanks 🙂

animamundicryst
Tourist
3 0 5

On debut theme at this moment i just added on theme.scss.liquid

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

and then at around line 2567 under the specs for .site-nav__dropdown { i modified. If i put it at 30 as in the first reply the menu would dissapear before the cursos would reach the submenu 😉 Play with it and see for yourself how it changes the position of the menu.

top: 25px;
petter1993
New Member
1 0 8

I had the same problem with te dropdown disappearing when moving the cursor from the button to the dropdown. And i found out that .site-nav__dropdown { top: 30px; } gets overridden by some html inline style. And 24px; works better for me.

 

Solution:

Replace .site-nav__dropdown { top: 30px; }

with:

.site-nav__dropdown { top: 24px !important; }

jacquespernet
Shopify Expert
18 0 3

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

I succeeded to have the submenu to show on hover, but I can't find the above line of code in the latest Debut theme.scss.liquid

I presume this need to be done in the site-nav.liquid? Can you help?

site-nav.liquid

start code ==>

{% comment %}
Renders a list of menu items
Accepts:
- linklist: {Object} Linklist Liquid object (required)
- wrapper_class: {String} CSS wrapper class for the navigation (optional)

Usage:
{% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
{% endcomment %}
<ul class="site-nav list--inline{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" id="SiteNav">
{% for link in linklists[linklist].links %}
{%- assign child_list_handle = link.title | handleize -%}

{% comment %}
Check if third-level nav exists on each parent link.
{% endcomment %}
{%- assign three_level_nav = false -%}
{% if link.links != blank %}
{% if link.levels == 2 %}
{%- assign three_level_nav = true -%}
{% endif %}
{% endif %}

{% if link.links != blank %}
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
<button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
<span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}
</button>

<div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
{% if three_level_nav %}
<div class="site-nav__childlist">
<ul class="site-nav__childlist-grid">
{% if link.links != blank %}
{% for childlink in link.links %}
<li class="site-nav__childlist-item">
<a href="{{ childlink.url }}"
class="site-nav__link site-nav__child-link site-nav__child-link--parent"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ childlink.title | escape }}</span>
</a>

{% if childlink.links != blank %}
<ul>
{% for grandchildlink in childlink.links %}
<li>
<a href="{{ grandchildlink.url }}"
class="site-nav__link site-nav__child-link"
{% if grandchildlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}

</li>
{% endfor %}
{% endif %}
</ul>
</div>

{% else %}
<ul>
{% for childlink in link.links %}
<li>
<a href="{{ childlink.url }}"
class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ childlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</li>
{% else %}
<li {% if link.active %} class="site-nav--active"{% endif %}>
<a href="{{ link.url }}"
class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ link.title | escape }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>

 

<== end code

 

Much appreciated

Taylor_Valliant
Tourist
7 0 4

Yes! "top: 25px;"  This is the change that made mine work! 

sunnysolosocial
New Member
1 0 0

Hi there,

I've tried doing this and now I've messed up my whole site ... What should I do?

Thanks

jacquespernet
Shopify Expert
18 0 3

Hi did you mess up the css? Can you show me the result?


@sunnysolosocial wrote:

Hi there,

I've tried doing this and now I've messed up my whole site ... What should I do?

Thanks


 

Ben-Kloud-Nine
Excursionist
35 0 8

@Leon 

has the code chaged as i cannot find the section:

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); });
Ben Moore