Issue: A user wants to modify the Dawn theme’s navigation menu to display dropdowns on hover instead of requiring a click.
Solutions Provided:
JavaScript approach (post #5): Add a script to header.liquid (around line 500) that attaches mouseover/mouseleave event listeners to menu items with dropdowns. A video tutorial was referenced.
CSS/HTML approach (post #13): An alternative method using only HTML and CSS, with a video explanation provided.
Updated JavaScript for recent Dawn versions (post #19): Add onmouseover and onmouseleave events to the .mega-menu__content container, plus custom JavaScript at the end of the header file.
global.js modification (post #23): Insert code into assets/global.js within an existing event listener block (around line 9) to enable hover functionality. Includes a screenshot for reference.
Ongoing Issues:
The discussion remains open with unresolved compatibility and scope issues for newer theme versions.
hello! i want to do theh same with my sense theme, i looked for the “sticky headers” line and I couldnt find it 
I alreeady have a mega menu on my website (www.peripawear.com) can you please help me so I can do the same…
i just cant seem to find where to add this code in my weebsite code page
Thank you @wmiz !!
it works perfectly on Refresh theme version 11.0.0
yes facing same issue on mobile preview.
This works for the top menu, but the unintended consequence is that also auto expands other dropdowns further down the page. Anyway to have it only work for the menu items?
Hi Wmiz
Thanks so much for this code. It works great on my menu,
The only issue is- I have some collapsible tabs in my product descriptions, and these now open on hover (not click). They disappear when you hover away so I only want the hover to be applicable to the main navigation menu. is there a way of doing this?
Thanks
Chloe
This is the best solution for Dawn ver.13.0.1.
Thanks for your huge help!
To fix the issue where the submenu disappears when hovering off the inline menu item and onto the submenu
To fix the issue where the submenu disappears when hovering off the inline menu item and onto the submenu, you need to modify your JavaScript code. The current implementation closes the submenu whenever the mouse leaves the inline menu item, even if it enters the submenu itself.
You can achieve the desired behavior by modifying the event listener to check whether the mouse is still within the bounds of either the inline menu item or the submenu before removing the “open” attribute. Here’s the modified code:
This modification ensures that the submenu stays open when the mouse moves from the inline menu item to the submenu, as long as the mouse is still within the bounds of either element.
the last part of the script closes the submenu when you click anywhere off of it
** i used chatgpt to help me fix the issue i hope this helps someone!
Couldn’t get this to work either unfortunately. Additionally, does your method work for the mobile menu? I noticed all of these solutions above do not apply to the mobile menu and in most case the mobile menu disappears.
Thank you! This worked for Crave! 14.0.0!
I found that in Dawn 7 - the “z-index: -1” was causing the nav to disappear to soon, other than that many thanks!
assets/component-mega-menu.css ( line:14 )
https://youtu.be/M1O4ys4sa-s?si=wd_b_XlYIpPkk61s
may be this can help you i tried it and works
Hi,
Can you help me with this issue on the Rebel theme?
Hi, here is a solution (not for you I think but for the other users who had this problem) :
hi,
this worked perfect only for main page, it is the old version on other pages.