Header, Main Menu option in Mobile view is not working

Technical Q&A
,

Topic summary

Problem: On mobile, the main menu didn’t open after tapping the menu button; desktop menu worked.

Key checks proposed:

  • Ensure the theme’s JavaScript (e.g., theme.js) is included and test with apps disabled.
  • Some suspected a jQuery click handler/CSS toggle issue requiring code changes.
  • Store URL requested for inspection.

Root cause identified:

  • Missing critical lines at the top of layout/theme.liquid, especially <html class="js" lang="{{ request.locale.iso_code }}">. The class="js" enables theme CSS/JS that powers the mobile drawer (common in Dawn and similar themes).
  • A previously added Google site verification meta likely displaced/removed the <html ...> line.

Fix implemented:

  • Restore the top structure to:
    • <!doctype html>
    • <html class="js" lang="{{ request.locale.iso_code }}">
  • Move the verification meta into the <head> section.
  • Screenshots helped confirm the missing class and validate the fix.

Outcome:

  • Mobile menu works after the correction.
  • Resolution reached; user confirmed and was asked to mark the solution.

Note: Earlier JS/app checks were not ultimately needed once the HTML structure was corrected.

Summarized with AI on December 11. AI used: gpt-5.
11

For starters, you seem to miss these lines from your theme, and class="js" is important for a lot of CSS.

Fix this first, looks like it’s all that is necessary.