How to add hover menu to dawn theme mega menu

Store Design
, , , ,

Topic summary

A user seeks to implement a hover effect for the mega menu in Shopify’s Dawn theme after unsuccessful previous attempts.

Solutions Proposed:

  • JavaScript approach: Add code targeting details.mega-menu elements that triggers menu opening on mouseenter and closing on mouseleave (desktop only, >990px width)

  • CSS approach: Style .header__menu-item and .header__submenu classes using opacity, visibility, and transform properties with hover/focus-within pseudo-classes to create smooth transitions

  • App-based solution: Install a third-party mega menu app (e.g., Globo Mega Menu) to avoid custom coding entirely

Status: The discussion remains open with multiple implementation options provided but no confirmation of which solution the original poster chose or whether any resolved the issue.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

wanting to add hover effect to menu how do i do so? have put in this forum a few times and haven’t been able to get something to work

2

Hi @JGBowie ,

You can achieve it by using this js code:

if (window.innerWidth > 990) {
  document.querySelectorAll('details.mega-menu').forEach(menu => {
    const summary = menu.querySelector('summary');

    menu.addEventListener('mouseenter', () => {
      menu.setAttribute('open', '');
      summary.setAttribute('aria-expanded', 'true');
    });

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

Hi,

Hope this will help

  • At Right CSS File
  • Add Hover Menu Code

Code example

/* Hover menu styles */
.header__menu-item:hover .header__submenu,
.header__menu-item:focus-within .header__submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}

.header__submenu {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
pointer-events: none;
position: absolute;
z-index: 10;
}
4

Hi @JGBowie ,

I’m Danny from Samita.

The Dawn theme doesn’t come with hover-based mega menus out of the box, so getting that effect usually involves custom code.

To save time and avoid complex custom development, I highly recommend trying a mega menu app.

Example: Globo Mega Menu - It allows you to create advanced dropdown and mega menus with hover effects — all without touching code.