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.
1

Hello!

I am trying to get the mobile menu to auto-close after clicking on a link rather than clicking on the X to close it manually.

Can you help me with some code and where should I insert it? I have the dawn theme and gempages (one product store/page)

the site: alphapills.ma

pass: paobaw

thank you

2

Hello @pliskin ,

Edit theme.liquid
Search for now here just before of it add tis code:

If you need further help don’t hesitate to contact me.
You can find the email in the signature below.

Thanks

3

first thank you for the reply ,i copy past the code you give into theme.liquid as you say. (screenshot) the problem is the same, in mobile when i click a link in menu (mobile) the menu stay open (he must close automatically).

dsds.JPG
dsds.JPG1250Ă—333 38.5 KB

4

I checked the source code but there is no code there as you shared in the screenshot.

5

csdcdc.JPG
csdcdc.JPG1330Ă—581 70.3 KB

6

Check the source code in frontend using ctrl + U
and search for the code you added. If found let me know so I can check what you did.

7

i can’t undestand, in shopify it shown (screen1) but in crl+u it’es missing (screen2). i don’t know if there is relation but i add 3 code to css.base to remove cart/search/log button from menu

1.JPG
1.JPG1318Ă—561 75 KB

2.JPG
2.JPG1295Ă—434 60.5 KB

8

css is a different thing. We cannot use JS code in css files.
btw if you have a JS file use this code there.

Or check which theme template is active and use this code there.

Keep note code will not work until it will reflect in the live store.

9

thanks for assistance so much, but i dont understand nothing in coding, where i must check theme template or jf file ? (i use gempages, one page) . i must search in this list (screenshot) ??

3.JPG
3.JPG239Ă—527 19 KB

10

i randomly add the code in themes.gempages.header.liquid and … it works. thank you

11

hello again @Guleria , unfortunately another problem appear: when i click shop now (commander maintenant) the menu open itself automatically… Normally all button named buy now (commander maintenant) in my page redirect to the section of product payment (cod form) but now when i click button buy now, the menu appear automatically. actually the menu appear when i click on any button (like buttons in footer) .

12

Update the code
13

Thank you so much, work perfectly.

1 Like