Dawn Theme - How to add the ability to hover over dropdown in navigation menu without clicking

Store Design
21

Hi Wmisback, your solution works great on Sense theme. How can I put hyperlink to parent menu in the dropdown. Your help will be highly appreciated. Thanks

22

Hello @wmiz , I just followed your solution, and its amazing but recently I increased the menus in the list and facing an error.
If you go to my website www.cloudstore.pk and then women you will see that last two menus can be selected. The list automatically gone hidden while we move the mouse to Bottoms and Shawls.

Need your support to fix it.

23

You can also achieve the same result by pasting this code in the global.js (This is inside the assets folder (assets/global.js)).

Look for this line of code ‘document.querySelectorAll(’[id^=“Details-”] summary’).forEach((summary)'. On my own file it starts on line 9.

Inside the block, add the code below:

// Add this code make menu appears on hover
  summary.addEventListener('mouseover', (event) => {
   const menuDetails = event.currentTarget.closest('details');
   const menuListContainer = menuDetails.closest('ul')
   event.currentTarget.setAttribute('aria-expanded', 'true');
   menuDetails.setAttribute('open', 'true');

    menuListContainer.addEventListener('mouseleave', () => {
      menuDetails.removeAttribute('open');
      summary.setAttribute('aria-expanded', 'false');
    });

    menuDetails.addEventListener("mouseleave", () => {
      menuDetails.removeAttribute("open");
      summary.setAttribute('aria-expanded', 'false');
    });

  });

make-menu-appears (1).png
make-menu-appears (1).png938×678 61.2 KB

7 Likes
24

Thank you! this worked for me in Dawn 2.0.

25

Thanks! It worked for me too.

1 Like
26

For me the header won’t remain hovered when I move mouse, unsure why I have tried all code suggestions in here but can’t seem to make it stick.

27

Hello - thankyou this worked for me when I hover but it closes before I can click. Any tips?

28

Hello, same for me. - Tried several codes.

Once you hover and move your mouse the drop-down menu instantly disappears, have you found a solution?

29

@iamtess @prophecy

Hello, the problem can arise when there is a significant distance between the menu item and the dropdown container. Whenever the user hovers over the menu item, the dropdown (ul) appears, but if the user moves toward the dropdown menu, there might be a gap between the link and the dropdown menu. This can cause the dropdown to close before the user can reach it.

To solve this issue, you can try reducing the space between the list item and the dropdown container. For instance, you can add the following CSS to your theme, which will eliminate any margin at the top of the dropdown menu:

ul.header__submenu {
    margin-top: 0px;
}

If this doesn’t work, you should also ensure that there is no margin at the bottom of the menu item. You can do this by adding the following CSS to your theme:

summary.list-menu__item { margin-bottom: 0px;}

Our goal is to make sure that there is no space between the list item and the dropdown menu, allowing the user to access the dropdown menu without any obstacles.

30

Thankyou @kusimo I will give this a try. :victory_hand:

31

Hello and thanks,
On Dawn 7.0.1 hover works but when try to click a Subcategory it dissapears, any help?

Best,

32

I’d like to give an update as I had to remove this line of code, it worked on desktop but I noticed that my mobile menu would not show any of the sublinks. Rather than play with it further, I removed the code. If there is a way to make sure it works on mobile too I’d love that!

33

Hello,
on desktop it works like magic but in the same time crashes on the mobile. I can’t click on anything because there is not anything…
*Everything worked correctly before I applied this code.

How to fix this problem?
Thank you!

Kind regards

34

Hi,

Can you help me with the update code for Shopify Dawn Theme 9.0.0?

While using the above code, I am getting an issue while hovering on the menu links, when I scroll down to the sub menu, the whole thing vanishes.

35

This is working even now. But I need some help trying to make the menu fadeIn / out when you hover on the link while using this code or something else.. right now it’s just popping the menu and making it disappear.

36

Hi

I left it without hovering,

37

Hi!

Im trying to implement the code on my refresh theme, but sadly the hover function wont stick, ie when i move my mouse cursor a bit down to click on a menu item, the menu disappears, could you please help out?

38

Hi Wimz,

When you add this code the menu opens when you hover but when you go down to sub menu items after two items menu closes.

is there a way to prevent this.

Best Regards.

Ali

39

was there a solution to this?

40

is there a solution to the menu disappearing before you can click it? I am using sense theme, thanks!