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

Open drop down menu on hover in latest Dawn theme

Open drop down menu on hover in latest Dawn theme

technase
Shopify Partner
229 2 55

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
Replies 2 (2)

shahrozbabar5
Shopify Partner
346 28 36

@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.

Need a Shopify Expert and Specialist? Let's chat on WhatsApp +923046983349 and bring your vision to life!


Custom Shopify Store Design | Premium Themes | Variant Apps Expert


Your Coffee Tip a seamless synergy. ❤️

technase
Shopify Partner
229 2 55

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

technase