Anchor Links Not Closing on Mobile Menu

[willowfavrecords]

Hi!

I’m using the Atelier theme & on mobile view, the anchor links used on the menu won’t close.

Website can be found at: https://387aiz-tj.myshopify.com/

with pw: beiraw

[DevifyHQ]

This happens because Shopify’s default mobile navigation doesn’t automatically close when a link scrolls to a section on the same page (anchor link). You can fix it with a small JavaScript snippet.

Here’s how to fix it

Shopify Admin → Online Store → Themes → Atelier → Edit Code

[willowfavrecords]

@DevifyHQ thank you! Do you know what the JS snippet should be?

[Mikkynat]

@willowfavrecords

Hi!

I’m using the Atelier theme & on mobile view, the anchor links used on the menu won’t close.

Hi,
I’ve seen this happen with several themes (including Atelier), on mobile, when the menu item is just an anchor link (like #section), the menu doesn’t close because the click event doesn’t trigger the “close” action.

You can fix it by adding a small script that detects when an anchor link is clicked and then closes the mobile drawer. It only takes a few lines of code, placed before the </body> tag in your theme.liquid file.

If you’re comfortable editing theme code, I can show you exactly where and how to add it.
If not, no worries; I can step in and handle it for you so it works cleanly on mobile.

[willowfavrecords]

@willowfavrecords

I’m comfortable editing the theme code if you could provide what lines I would need to insert!

I’m comfortable editing the theme code if you could provide what lines I would need to insert!

[Mikkynat]

Nice — perfect! Since you’re comfortable editing theme code, here’s the general approach:

In your theme.liquid (or whichever layout file ends just before </body>), you can add a short script that listens for clicks on anchor links inside the mobile menu and triggers the menu close button.

Something like this should get you most of the way there

<script>
document.addEventListener('DOMContentLoaded', function () {
  const anchorLinks = document.querySelectorAll('.menu-drawer__menu-item[href*="#"]');
  anchorLinks.forEach(link => {
    link.addEventListener('click', function () {
      // find and trigger menu close
      const closeBtn = document.querySelector('.header__icon--menu');
      if (closeBtn) {
        // some themes need a small delay here
        setTimeout(() => closeBtn.click(), 150);
      }
    });
  });
});
</script>

You might need to tweak the selector for your theme. Atelier uses slightly different class names for its drawer and toggle buttons, so you’ll want to match those.

Let me know if it works.

[willowfavrecords]

Thank you! How would I find the different class names that Atelier uses instead to ensure I’m swapping the correct code?

[Mikkynat]

This is where the technicality of coding comes in, you’ll need the developer tools and an inspector to figure out the exact selectors, so you don’t end up messing everything up.

[tim_1]

You do not need to edit theme code for this.

Go to Customize, navigate to your Footer Group and add a “Custom liquid” section.
Paste this code:

<script>
  document.querySelector('header-drawer').addEventListener('click', e => {
    let link = e.target.closest('a');
    if (!link) return;
    let url = new URL (link.href);
    if (url.pathname != location.pathname) return;
    if (!document.querySelector(url.hash)) return;
    let closeButton = e.currentTarget.querySelector('summary');
    if (closeButton) closeButton.dispatchEvent( new Event('click'));
  });
</script>

The code should work for Dawn and Horizon family themes.

[rajweb]

@willowfavrecords

I’m using the Atelier theme & on mobile view, the anchor links used on the menu won’t close.

Website can be found at: https://387aiz-tj.myshopify.com/

with pw: beiraw

Hey @willowfavrecords ,

Got it - you’re using the Atelier theme

This is a common issue with Shopify themes (especially Atelier, Focal, and similar), because by default, the mobile menu only closes on page navigation, not on same-page anchor clicks.

Follow these Steps:

1. Online Store
2. Themes
3. Edit Code
4. Open the file: theme.js(or sometimes global.js, or main.js )
5. Scroll to very bottom to the file and pate this snippet

// Close mobile menu when clicking anchor links
document.addEventListener('DOMContentLoaded', function() {
  const drawer = document.querySelector('[data-drawer]'); // mobile menu drawer
  const anchorLinks = document.querySelectorAll('a[href^="#"]');

  anchorLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      const targetId = this.getAttribute('href');

      // Only apply if the link is an anchor and the drawer is open
      if (targetId.startsWith('#') && drawer && drawer.classList.contains('is-open')) {
        e.preventDefault();

        // Close the drawer
        const closeBtn = document.querySelector('[data-drawer-close]');
        if (closeBtn) closeBtn.click();

        // Smooth scroll to section after short delay
        setTimeout(() => {
          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            targetElement.scrollIntoView({ behavior: 'smooth' });
          }
        }, 400);
      }
    });
  });
});

Alternative (if Atelier uses “mobile-menu” class instead of data-drawer)

If the above doesn’t work, replace this line:

const drawer = document.querySelector('[data-drawer]');

with:

const drawer = document.querySelector('.mobile-menu, .menu-drawer');

Thanks

Rajat

[willowfavrecords]

Thank you for the help, Rajat!

I’m not seeing theme.js, global.js or main.js. Could “theme-editor.js” be the correct file?