Open drop down menu on hover in latest Dawn theme

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.

@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

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.