How to add hover menu to dawn theme mega menu

Store Design
, , , ,
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.