How to make a mobile menu close after clicking a link?

[Fab135]

We have a Dawn-Onepager, with a small menu, which enables the user to jump on section on the onepage.
On Desktop everything works fine.
On Mobile the Menu does not close when clicking on a "menu link". The Menu only closes when jumping to a different page.
We need the mobile menu to close it self, after clicking on a menu-link.

[saartech]

Click to expand...

Hi @Fab135
To ensure that the mobile menu closes itself after clicking on a menu link in your Dawn-Onepager Shopify theme, you may need to make modifications to the theme's code. Here's a general solution that should work:

1. From your Shopify admin, go to "Online Store" and select "Themes."
2. Locate the Dawn-Onepager theme and click on the "Actions" button.
3. Select "Edit code" from the dropdown menu.
4. In the theme code editor, find the JavaScript file that controls the mobile menu behavior. This file is usually named `theme.js` or similar. It may be located in the "Assets" or "Sections" folder.
5. Open the JavaScript file and search for the code responsible for handling the click event on the mobile menu links. It could be a function that toggles the menu visibility or a specific event handler.
6. Look for the code that changes the menu's visibility or toggles its class when a menu link is clicked.
7. Add code to close the mobile menu after the link is clicked. The specific code to use depends on how the menu is implemented in your theme, but here's a general example:

Click to expand...

// Find the code responsible for handling the click event on menu links
$('.mobile-menu-link').on('click', function() {
// Code to close the mobile menu
$('.mobile-menu-toggle').removeClass('active');
$('.mobile-menu').hide();
});​

Click to expand...

8. Save the changes to the JavaScript file.
9. Preview your website on a mobile device to confirm that the menu now closes after clicking on a menu link.
If you are unsure about making these modifications yourself, it's recommended to reach out to a Shopify developer or the theme's support team for assistance.

Click to expand...

Thanks & Regards 
SaarTech || Shopify Partner

[Fab135]

I only have "theme-editor.js", which is a very short file and theme.liquid

[saartech]

OK @Fab135 You can do this 
1. Open the `theme.liquid` file in your theme editor.
2. Locate the code for your mobile menu. This is typically found within a navigation section or a specific mobile menu section. Look for HTML elements or CSS classes related to the mobile menu.
3. Add an event listener to detect clicks on the mobile menu. You can achieve this by adding the following JavaScript code:

 document.addEventListener('DOMContentLoaded', function() {
    var mobileMenu = document.querySelector('#your-mobile-menu-selector'); // Replace with the selector for your mobile menu element
    mobileMenu.addEventListener('click', function() {
      // Close the mobile menu here
      // You can use any method you prefer to close the menu, such as adding/removing CSS classes or modifying inline styles
    });
  });

4. Replace `#your-mobile-menu-selector` with the appropriate CSS selector for your mobile menu element. This selector should target the element that represents the mobile menu when it is open.
5. Inside the event listener function, add the necessary code to close the mobile menu. This code will depend on your specific theme's implementation. Here are a few common methods:

- If your mobile menu uses a CSS class to hide/show it, you can toggle the class on the menu element. For example:

mobileMenu.classList.toggle('mobile-menu-open');

- If your mobile menu is controlled by adding inline styles, you can modify the relevant style property to hide the menu. For example:

mobileMenu.style.display = 'none'

Make sure to adjust the code according to your theme's structure and implementation. If you encounter any difficulties or need further assistance, please provide more information about your theme or share the code from your `theme-editor.js` file.