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

Technical Q&A

Topic summary

  • Issue: In a Dawn-Onepager Shopify theme, the mobile menu does not close after tapping a link that jumps to a section on the same page; it only closes when navigating to a different page. Desktop works fine.

  • Initial guidance: Modify the theme’s JavaScript (typically theme.js) to close the menu on link click. Example provided (jQuery) to handle ‘.mobile-menu-link’ clicks and remove active classes/hide the menu.

  • Constraint raised: Only theme-editor.js (very short) and theme.liquid are available; no theme.js found.

  • Updated approach: Insert vanilla JavaScript into theme.liquid. On DOMContentLoaded, add a click listener to the mobile menu element to trigger closing logic after a link is clicked.

  • Implementation details: Replace the placeholder selector (#your-mobile-menu-selector) with the actual selector for the open mobile menu element.

  • Closing methods: Either toggle/remove the menu’s “open/active” class or set inline styles (e.g., display: none), depending on how the theme controls visibility.

  • Action items: Adjust selectors/logic to match the theme’s structure and test on a mobile device; consider developer or theme support if needed.

  • Status: No confirmation the fix worked; discussion remains open. Code snippets are central to the solution.

Summarized with AI on January 26. AI used: gpt-5.
1

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.

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

3

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

4

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
    });
  });
  1. 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.
  2. 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.