Since updating to the latest DAWN template hamburger menu does not open on mobile!
have been through previous threads with this issue amending the code and nothing has worked
can anyone help?
Topic summary
Main Issue:
After updating to the latest Dawn theme, the hamburger menu fails to open on mobile devices.
Root Cause Identified:
The problem stems from broken HTML structure rather than CSS. An improperly added SEO app creates duplicate <html> opening tags, causing the browser to ignore the second tag. This results in the <html> element having class “no-js” instead of “js”, which prevents the menu from functioning. Shopify removed “no-js” handling in recent Dawn versions, requiring the “js” class for proper operation.
Solution:
Delete the problematic SEO app code causing the duplicate HTML tags. Once removed, the menu works correctly.
Related Issues:
- One user reported the hamburger menu appearing at the bottom of mobile screens instead of the header (theme feature, not a bug)
- Another user found their hamburger menu broken due to a popup feature; disabling the popup temporarily fixed it, but they need both features working simultaneously (unresolved)
Status: Primary issue resolved; one case remains open regarding popup/menu conflict.
1 Like
Hi @ellzmai45
Check 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 “theme. Liquid” file. Find the tag and paste the code below before the tag.
And Save.
result:
Yes, can you try to add on the custom.css on your theme editor.
Click the header
On the right side there will be new tab.
Find this one.
And paste the code below.
.menu-drawer {
transform: unset;
visibility: visible;
}
And Save.
Nope, it’s not a CSS issue.
You have a broken HTML structure.
Menu does not work because your element does not have “js” class, but has “no-js” instead and this happens because your SEO App code is added improperly. See how there are 2 opening tags – this is not allowed.
Browser will try to fix the problem and simply ignore the second one – this is how you’ll end up with <html class=“no-js” … > which prevents your menu from working properly (probably other areas are affected as well).
Note that Shopify has removed handling of “no-js” in recent versions of Dawn, it must be “js”:
https://github.com/Shopify/dawn/pull/3245 :
[details=Show More]
**Why no
Thank you! I would have never thought to change that part of the code , all working now I have deleted it
Hey Tim,
I’m having a similar issue. Ay chance you can assist?
Hamburger menu is no longer appearing in header, just at the base of mobile screen. This is taking up valuable real estate.
How can I add the hamburger to the Right hand side (logo on left).
When I choose this option in shopify on the logo is present.
www.nouvelleglass.com
It’s not a bug, rather a theme feature.
Potentially it’s possible to place the menu button to be to the right of the logo;
however, what about the cart sticky which replaces the menu button when something is in the cart?
Hello Tim,
Can you assist with my hamburger menu not working as well? I too had to update my Shopify theme. Here’s my website: www.itactuallyfits.com. Thanks and I look forward to your reply!
Briefly – see that something is wrong with your popup. Try disabling it, if it’s enabled.
That did it! Thank you so much.
Hello again. I need to keep the pop up enabled that’s cause the hamburger bar not to work. Is there another solution to fix this problem without dis enabling the pop up? Thank you!