Hamburger Menu (Mobile) to close once you click on menu (anchor link) Crave theme

rm014
Shopify Partner
34 0 2

Hi,

In my header menu, my menu options point to anchor links further down on the same page. Works perfectly on desktop but when clicking on the same menu item in mobile view the anchor link works but the mobile menu won't close.

 

Any ideas on how to do this?

 

 

Thanks in advance!

Replies 7 (7)

GemPages
Shopify Partner
5587 1260 1190

Hi @rm014, could you please provide your store domain then we can assist you check it on our end? Thank you

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
rm014
Shopify Partner
34 0 2

Hello @GemPages, here it is:

https://thecanfather.myshopify.com/
pw: beercan

GemPages
Shopify Partner
5587 1260 1190

Hi @rm014 ,

 

Thanks for getting back. After checking this issue, I can see that is not a simple issue because we will need to add some javascript custom code to bring a good user experience on the mobile view. We should hire an Shopify expert or try to put the request to Jobs and Careers.  Our Shopify expert will help us.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

ExpertRookie
Shopify Partner
1518 249 309

@rm014 

Please try to add this code to theme.liquid file, before "</body>" tag

<script>
let menu_link = document.querySelectorAll(
  `#menu-drawer .menu-drawer__menu-item`
);

menu_link.forEach((e) => {
  e.addEventListener("click", (evt) => {
    document
      .querySelector(`#Details-menu-drawer-container`)
      .removeAttribute("open");
  });
});
</script>

 try it and let me know

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
rm014
Shopify Partner
34 0 2

I tried this and the anchor is working but the only problem is, once you click on the menu, the screen page will be unresponsive unless you click on the screen again (once you do, the hamburger menu will be open again)

dafdev
Shopify Partner
2 0 0

Hey,

 

I notice when visiting your website you managed to solve this issue.

 

Could you tell me if you just used the code above posted by @ExpertRookie or did you have to add to it?

 

I assume the code posted above is theme specific so I may need to edit the div/class names but just wondered if you had to add anything else?

 

Thanks 

kawsar49
Visitor
3 0 0

Hi,
Have you found any solution?