Shopify Mobile Menu Not Working: Theme JavaScript, App, and CSS Fixes (2026)

Quick Fix with Thunder

First Find Out Whether the Click, Drawer, or Overlay Is Broken

Open your store in Chrome, switch DevTools to a mobile viewport, reload, and click the hamburger icon. If the Console shows a JavaScript error before the click, fix that first. One broken app snippet can stop the theme's header script from registering the menu event.

If there is no error, inspect the hamburger button. It should point to a real drawer element through an ID, ARIA control, custom element, or data attribute. Custom header edits often rename the drawer but leave the button pointing at the old target.

Also inspect the page for invisible overlays. Cookie banners, popup apps, sticky announcement bars, and menu apps can sit above the header with a high z-index. For nearby buying-path issues, see the add-to-cart button guide, cart drawer debugging checklist, and app script cleanup guide.

Restore the Mobile Menu Button and Drawer Contract

Most Shopify themes use a button, a drawer, and a small script that toggles an open class or attribute. The names differ by theme, but the contract is the same: button click opens the drawer, body scroll locks, escape closes, and the close button reverses the state.

<button
  type="button"
  class="header__menu-toggle"
  aria-controls="MobileMenuDrawer"
  aria-expanded="false"
  data-mobile-menu-toggle>
  <span class="visually-hidden">Open menu</span>
</button>

<aside id="MobileMenuDrawer" class="mobile-menu" hidden>
  <!-- menu links -->
</aside>

Then verify the JavaScript still matches those selectors. If your theme was updated, copied from Dawn, or modified by a menu app, one selector mismatch can break the entire mobile menu.

const button = document.querySelector('[data-mobile-menu-toggle]');
const drawer = document.querySelector('#MobileMenuDrawer');

button?.addEventListener('click', () => {
  const isOpen = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', String(!isOpen));
  drawer.hidden = isOpen;
  document.documentElement.classList.toggle('overflow-hidden', !isOpen);
});

Add this only in a duplicate theme and adapt it to your theme's existing structure. If your theme already has a custom element for the header drawer, fix the broken selector instead of adding duplicate menu logic.

Check CSS That Makes the Shopify Mobile Menu Look Dead

Sometimes the menu opens, but shoppers cannot see or tap it. Inspect the drawer after clicking the hamburger icon. Look for display:none, visibility:hidden, opacity:0, off-screen transforms, low z-index, and parent containers with overflow:hidden.

A safe drawer needs a predictable mobile layout: fixed positioning, a z-index above the header and announcement bar, visible background, and a scrollable menu area. Avoid using large icon fonts or app widgets inside the drawer because they add delay to the first tap.

.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 360px);
  z-index: 1000;
  overflow-y: auto;
  background: #fff;
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.mobile-menu:not([hidden]) {
  transform: translateX(0);
}

Disable App Embeds and Script Optimizers in a Duplicate Theme

Mobile menu failures often appear after installing a popup, page builder, sticky header, translation, review, or speed app. Duplicate your live theme, disable app embeds, and test again. If the menu works, re-enable apps one at a time until the failure returns.

Be especially careful with tools that defer every script by default. Critical theme scripts for navigation, product forms, carts, and search should remain available at interaction time. For broader cleanup, follow the complete Shopify speed optimization guide, Shopify INP guide, and unused code cleanup guide.

If an old app was removed but the menu still fails, run the Shopify app leftovers checklist. Orphaned snippets in theme.liquid are a common reason mobile-only JavaScript breaks.

Manual Fix vs Thunder Fix

For bigger cleanup projects, compare Thunder pricing with professional Shopify speed optimization.

FAQ