Hamburger Menu on mobile isn't working

Store Design
, , ,

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.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
5

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

Screenshot 2024-06-20 at 2.26.54 PM.png
Screenshot 2024-06-20 at 2.26.54 PM.png724×1228 117 KB