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

Technical Q&A
2
Show More

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:
    [/details][details=Show More]
    markup // 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(); });​
    [/details][details=Show More]
  8. Save the changes to the JavaScript file.
Show More
  1. Preview your website on a mobile device to confirm that the menu now closes after clicking on a menu link.
Show More

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.
[/details][details=Show More]
Thanks & Regards
SaarTech || Shopify Partner