Why is my mobile site's drop down menu not working on Dawn?

Shopify Discussion

Topic summary

Mobile hamburger menu toggles to an X on Dawn theme but the menu drawer doesn’t open on the mobile site. Store URL provided for context.

Suspected cause: an issue with the “details & summary” markup (HTML disclosure elements that control show/hide behavior).

Proposed fix (code provided): add CSS to Assets > base.css to force the drawer to appear when the menu is opening:

  • .menu-opening #menu-drawer { transform: translate(0) !important; visibility: visible !important; }

Intended effect: ensures the menu drawer translates into view and is visible when the .menu-opening state is active.

Action item: implement the CSS snippet in base.css and test on mobile.

Status: No confirmation yet from the original poster; resolution pending.

Summarized with AI on February 23. AI used: gpt-5.
1

My drop down menu on the mobile site doesn’t work. When you hit the three lines it turns into an X. I am using Dawn and my website is hippi-chicks-boutique.myshopify.com

2

Hi @Hippichicks ,

There was something wrong with your details & summary code, but anyway, try placing this code to your base.css file under the Assets folder. Let me know if it works.

.menu-opening #menu-drawer {
    transform: translate(0) !important;
    visibility: visible !important;
}