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

[rm014]

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!

[GemPages]

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

[rm014]

Hello @GemPages, here it is:

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

[GemPages]

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.

[ExpertRookie]

@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

[rm014]

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]

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]

Hi,
Have you found any solution?