Goal: Modify a Shopify Dawn header so desktop menus open on hover while the parent item remains a clickable link to its collection; seek a mobile-friendly approach.
Proposed approach: A contributor shared JavaScript and minimal CSS to enable hover-open on non‑mobile devices by attaching mouseenter/mouseleave events to Dawn’s details/summary menu structure (including mega-menu content). Instructions said to add the code at the end of theme.liquid and keep Dawn’s default drawer behavior on mobile. Screenshots illustrated where to place the code.
Results: The shared code worked for some users, but the original poster reported it didn’t work on their store, then later said a different code solved their issue without posting it.
Alternative: A no-code option suggested using a mega menu app (Meteor Mega Menu), which supports hover or click triggers and defaults to click on mobile.
Open questions: Multiple users asked for a concrete solution to keep the parent menu item acting as a normal link (navigating) rather than only toggling the dropdown. This specific requirement was not resolved publicly.
Status: Partially resolved with mixed results; no definitive, shared solution for the clickable parent link. Discussion remains open.
Summarized with AI on December 13.
AI used: gpt-5.
I do have a script that makes the header on dawn theme active on hover. As header menu of dawn theme is controlled via JS, we must add few JS codes to the theme.
Also, I would like to preview your store so that i can give further recomendations based on yout storefront. The below codes contains CSS which may require updated based on the height of the header. I had created this code which works perfectly for normal dawn theme. However, if you have already made custom changes on the header, we may need to make a few updates.
To implement the feature, please add bellow code to the end of theme.liquid file.
My recomended solution for mobile device would be to keeb the default functionality of the dawn theme. Dawn theme already provides a drawer which is user friendly.
If you require further detailed feedback, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Hey @AllisonMH ! Sounds like you already found a solution, but just in case anyone else is looking for way to accomplish this:
One option for this (without using any code) would be to look into using a mega menu app, such as our Meteor Mega Menu app. The Meteor app allows you to build beautiful mega menus using either a hover or click trigger to activate the menus. We also automatically default to click on mobile to allow it to work correctly, since as you pointed out, hovering isn’t really a thing with touchscreens.
You can check out our demo site here to view all of our template options.
Allison if you found a solution for the Parent Link working as an actual link to another page rather than activating the dropdown could you please post it here?
I’ve been looking for solutions for days. Thank you
Thank you it worked for me, only searching for another solution for the Parent Link working as an actual link to another page rather than activating the dropdown!
