Open drop down menu on hover in latest Dawn theme

Store Design
, , , , , , ,

Topic summary

A user seeks to modify the Dawn theme’s dropdown menu to open on hover rather than click.

Proposed Solution:

  • Add custom CSS targeting .header__menu-item and .header__submenu classes
  • CSS controls display, opacity, and visibility properties to trigger on hover
  • Should be added via Theme Customizer > Custom CSS section
  • No JavaScript modifications required

Current Issue:

  • User encounters a publishing error when attempting to save the CSS: “online store session can’t be published”
  • An error screenshot was shared showing the save failure

Status: Unresolved - awaiting troubleshooting guidance for the publishing error preventing implementation of the hover functionality.

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

Hi,

I need help enabling my menu in Dawn theme to be opened on hover instead of click. Its a simple drop down menu not the megamenu.

Any help is greatly appreciated.

2

@technase ,

To enable your dropdown menu in the Dawn theme to open on hover instead of click, add the following CSS in your theme customizer (Online Store > Themes > Customize > Theme settings > Custom CSS):

.header__menu-item .header__submenu {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  position: absolute;
  z-index: 10;
}

.header__menu-item:hover .header__submenu {
  display: block;
  opacity: 1;
  visibility: visible;
}

This will cause the dropdown to open on hover for desktop views. No JavaScript change needed unless you want to disable click behavior.

Let me know if it doesn’t work with your current Dawn version.

1 Like
3

Thank you Shahroz, I tried adding it to the theme settings > custom CSS > but when I try to save it, it shows an error saying online store session can’t be published.

Untitled657.jpg
Untitled657.jpg1897Ă—961 153 KB