Hover functionality with Mega Menu in Dawn Theme and bold selected menu item instead of underlined

Store Design
, , , , , , ,

Topic summary

A user is seeking help modifying the Dawn theme’s mega menu to activate on hover instead of click, and wants selected menu items to appear bold rather than underlined.

Requested Changes:

  • Convert mega menu from click-based to hover-based functionality
  • Change active menu item styling from underline to bold text

Proposed Solution:
Another user provided CSS code that:

  • Disables pointer events on the summary element and re-enables on hover
  • Uses the :hover pseudo-class to display the mega menu dropdown
  • Adds transition effects for smoother interactions
  • Suggests using aria-current="page" attribute to bold the current menu link

Status: The discussion appears to have a potential solution offered, but no confirmation yet on whether the CSS code successfully resolved the issue.

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

Hi Shopify community,

I’m struggling to find out how I can have my mega menu working with an hover functionality vs click. Also, I’d love to make sure selected item in the menu get bolded instead of underlined.

Here’s my work in progress store (Dawn theme):

https://24a994.myshopify.com/

I hope someone can help !

Thanks,

Antoine

1 Like
2

Hi,

Hope this will work

  • Make Mega Menu Work on Hover (not click)
    css example
/* Show dropdown on hover instead of click */
summary.header__menu-item {
  pointer-events: none;
}

details[open] > .mega-menu {
  display: block;
}

details.header__submenu:hover > summary {
  pointer-events: auto;
}

details.header__submenu:hover > .mega-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

.mega-menu {
  transition: all 0.3s ease;
}
  • Used aria-current=“page” to bold the current menu link