How can I auto-close the mobile menu after a link click?

Shopify Discussion

Topic summary

Goal: make the mobile menu in a Shopify Dawn theme (with GemPages) auto-close after tapping a menu link.

Key steps and guidance:

  • Initial suggestion: add JavaScript just before in theme.liquid and verify it appears in the live page source (Ctrl+U). CSS edits won’t run JS.
  • Because GemPages controls the active template, the code must be placed where the live page actually loads it (e.g., GemPages header/template), not only in theme.liquid.

Progress and issues:

  • After confusion about not seeing the code in page source, the user added the script to themes.gempages.header.liquid. The menu then auto-closed on link click.
  • New issue: clicking “Shop now/Commander maintenant” and other buttons started opening the menu unintentionally.

Resolution:

  • The helper provided an updated script (content not shown in the thread) that likely targets only mobile-menu link clicks. After applying it, behavior was corrected and confirmed working.

Outcome:

  • Resolved. The auto-close works, and non-menu buttons no longer trigger the menu.
  • Takeaway: ensure JS is injected into the active template used by GemPages and scope event listeners to menu link elements only.
Summarized with AI on December 21. AI used: gpt-5.
12

Update the code