We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to add hover menu to dawn theme mega menu

How to add hover menu to dawn theme mega menu

JGBowie
Explorer
78 0 36

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

Replies 3 (3)

Emre_SecretHero
Shopify Partner
28 2 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');
    });
  });
}



- Helpful? Like & Accept the solution!
-  SecretHero: Boost Shopify store sales & loyalty through gamified experiences with the power of mobile games.
-  Launching in June! Subscribe now on our waitlist for early access.
- Questions? Reach me at serhat@secrethero.io or LinkedIn: Serhat Emre Cebeci

Small_Task_Help
Shopify Partner
1144 55 112

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;
}
To Get Shopify Experts Help, Click Here or E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Developers India
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad

Samita-Danny
Shopify Partner
17 0 1

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.

Sami B2B Wholesale — Unlock powerful wholesale features
Sami Request a Quote — Let customers request quotes easily

If our reply helped, please give it a Like or mark it as a Solution!