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

Solved

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

pliskin
Tourist
8 0 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

 

Accepted Solution (1)
Guleria
Shopify Partner
3403 679 963

This is an 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>
- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder

View solution in original post

Replies 12 (12)

Guleria
Shopify Partner
3403 679 963

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

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
pliskin
Tourist
8 0 1

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

Guleria
Shopify Partner
3403 679 963

 

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

 

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
pliskin
Tourist
8 0 1

csdcdc.JPG

Guleria
Shopify Partner
3403 679 963

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. 

 

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
pliskin
Tourist
8 0 1

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 menu1.JPG2.JPG

Guleria
Shopify Partner
3403 679 963

 

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.

 

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
pliskin
Tourist
8 0 1

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

 

pliskin
Tourist
8 0 1

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

pliskin
Tourist
8 0 1

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
Shopify Partner
3403 679 963

This is an 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>
- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
pliskin
Tourist
8 0 1

Thank you so much, work perfectly.