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

Store Design

Topic summary

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:

  • One user reports submenus disappearing when scrolling down to them on Dawn 9.0.0 (post #34)
  • Another notes the solution unintentionally auto-expands other dropdowns elsewhere on the page (post #44)

The discussion remains open with unresolved compatibility and scope issues for newer theme versions.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
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