Hamburger menu doesn’t work in Dawn theme. When clicked an “X” appears and the page is grayed out in all views.
Topic summary
A user reported that the hamburger menu in the Dawn theme is malfunctioning. When clicked, it displays an “X” and grays out the page, but the menu itself doesn’t appear.
Troubleshooting Process:
- The user provided screenshots showing the issue across different views
- A preview link was shared for diagnosis
Solution Provided:
A CSS fix was suggested to resolve the visibility issue:
- Navigate to: Shopify admin → Online Store → Themes → Actions → Edit code
- Add the following CSS to the appropriate stylesheet:
header-drawer .menu-drawer {
transform: unset;
visibility: visible;
}
Resolution:
The user successfully resolved the issue by adding the CSS code to assets/component-menu-drawer.css instead of base.css. The helper noted that base.css might have had syntax errors (missing curly brackets), and mentioned the code could alternatively be added to theme.liquid wrapped in <style> tags.
1 Like
HI @glbrownmepcom .,
Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?
Thanks for your response CodingFifty. Site hasn’t launched yet so I’ve attached 2 images illustrating the issue.
Please share the store preview link. @glbrownmepcom
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
header-drawer .menu-drawer {
transform: unset;
visibility: visible;
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Thank you Made4uo-Ribe! I tried base.css and it didn’t work. I then tried adding code to assets/component-menu-drawer.css and it work! Thanks again!
1 Like
Welceom! Yes, you can do it on the css file. Maybe your base.css have some missing curly bracket or more. That is why not working. You can also add in the theme-liquid but you need to add tag end and beginning of the code.