Menu problem on mobile

Store Design
, ,

Topic summary

A user reports their mobile menu is not displaying on their Shopify store (womber.fr). An image shows the menu drawer failing to appear when triggered.

Initial Solution Proposed:

  • Add custom CSS to base.css targeting .menu-drawer-container.menu-opening to force visibility and transform properties
  • This approach makes the menu visible on mobile devices

Root Cause Identified:

  • The actual problem is a missing <html> tag in layout/theme.liquid
  • This tag (with class="no-js" and language attributes) was likely deleted when custom <style> elements were added
  • Without it, multiple CSS rules fail to work as intended

Recommended Fix:

  • Restore the proper <html> tag to theme.liquid (reference: Dawn theme structure)
  • Once restored, the custom CSS workaround becomes unnecessary
  • Additionally, remove non-functional countdown JavaScript code that’s generating console errors

The discussion remains open with the proper solution identified but not yet confirmed as implemented.

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

Actually, while this solution works, it does not fix the problem, it fixes the symptom.

And the problem is that your layout/theme.liquid misses the tag, the one like https://github.com/Shopify/dawn/blob/release/11.0.0-rc/layout/theme.liquid#L2 – probably overwritten when the element was pasted.

Because of this there is a bunch of CSS code which does not work as intended.

If you add back the , you’d be able to undo the “solution” code because theme own CSS will work fine.

Also, there is a countdown JS code which can’t find the countdown element and floods console with errors – probably should be removed as well.