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

[pliskin]

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

[Guleria]

Hello @pliskin ,

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

<script>
document.querySelectorAll('a').forEach(function(menuLink) {
    menuLink.addEventListener('click', function() { 
		const detailsContainer = document.querySelector('.menu-drawer-container span');
        if (detailsContainer) {
            detailsContainer.click();
        }
    });
});
</script>

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

Thanks

[pliskin]

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

[Guleria]

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

[pliskin]

[Guleria]

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. 

[pliskin]

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

[Guleria]

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.

[pliskin]

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) ??

[pliskin]

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

[pliskin]

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

[Guleria · Accepted solution]

Update the code  

<script>
document.querySelectorAll('.menu-drawer__menu a').forEach(function(menuLink) {
    menuLink.addEventListener('click', function() { 
		const detailsContainer = document.querySelector('.menu-drawer-container span');
        if (detailsContainer) {
            detailsContainer.click();
        }
    });
});
</script>

[pliskin]

Thank you so much, work perfectly.