How to add hover effect for mega menu in shopify dawn theme

Store Design
, , ,

Topic summary

A user wants to implement a hover effect for a mega menu in Shopify’s Dawn theme, inspired by a similar effect on a website using the Prestige theme.

Current Implementation:

  • The user has already enabled mega menu functionality in Dawn
  • They’ve added JavaScript code to the header.liquid file that uses mouseover/mouseleave event listeners on menu items
  • The code targets .header__inline-menu details elements to control the “open” attribute

Problem:
The submenu window closes too quickly when moving the mouse toward it, making it difficult to browse submenu items. The hover effect isn’t working properly despite the code implementation.

Status: The issue remains unresolved with no responses yet. The user is seeking help to fix the rapid closing behavior of the submenu.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

memahmudhassan_0-1716940699609.png
memahmudhassan_0-1716940699609.png1919×619 156 KB

https://prettycious.com/

I liked this hover effect on this website. This website based on Prestige theme. But I have a website based on dawn theme. I have already enabled the mega menu for dawn theme and now I want to add the same hover effect for shopify dawn theme.

I have used this code on header.liquid after the following lines. But it’s not working properly, when I’m trying to taken the mouse to the sub menu, the sub menu window closes so fast and i can’t browse the sub menus.