Playbook · Shopify mobile menu not opening

Shopify mobile hamburger / drawer menu not opening or closing.

Written for a Shopify DTC owner whose phone-width hamburger / theme drawer will not open or will not close — hamburger tap does nothing, drawer slides in but overlay never dismisses, Escape / X ignored, focus trap stuck, body scroll lock left on after close, theme drawer section unbound on Current, or a second drawer app fighting native. DIY-first: prove theme drawer vs hamburger JS vs overlay vs focus trap; repair the live path; retest on a real phone-width storefront. Distinct from desktop mega menu / header dropdown not opening, announcement / promo bar missing or hidden, cart drawer not updating or stuck, and sticky add to cart missing. No earnings claims, no invented case studies.

Nico at Latch AI Ops · Sep 8, 2026 · ~12 minute read

Buy the 72-hour install — $997Mega menuCart drawerMerchant FAQ

01

Mobile hamburger / drawer menu not opening or closing — not mega menu, not announcement bar, not cart drawer, not sticky ATC.

Several “top of store” surfaces can look like navigation is broken. They do not share a settings panel. This page is only when the phone-width hamburger never opens the theme drawer, or the drawer will not close (overlay, X, Escape, focus trap, body scroll lock). Desktop mega menu / header dropdown not opening is shopify-megamenu-not-opening. Announcement / promo bar missing is shopify-announcement-bar-not-showing. Cart drawer not updating or stuck is cart-drawer-not-updating. Sticky add to cart missing is shopify-sticky-add-to-cart-missing. Do not chase desktop hover mega-menu settings when the broken control is the mobile hamburger / drawer.

02

Prove theme drawer vs hamburger JS vs overlay vs focus trap on a live phone-width storefront.

Open the live storefront at a phone width (DevTools device mode or a real phone) — not only Theme editor preview. Capture four proofs before you install another mobile-menu app:

  1. Customize Current → header → mobile menu / drawer / hamburger section: is the drawer block present and enabled on the published theme (not only a draft)?
  2. DevTools Console: tapping the hamburger — any red errors from theme.js, header.js, drawer apps, or consent scripts that abort open/close?
  3. Overlay / close path: does tapping the dimmed overlay, the X, or Escape close the drawer and unlock body scroll? Screenshot open and stuck-closed states.
  4. Accessibility DOM: does the hamburger toggle aria-expanded, and does focus move into the drawer (and return on close) without a focus trap that never releases?

If you only tested desktop mega menu hover, the announcement / promo bar, the cart drawer, or sticky add to cart, you are on the wrong playbook.

03

Theme header mobile drawer / hamburger section unbound on Current.

Online Store 2.0 themes gate the phone menu behind a header mobile drawer / hamburger / menu-drawer section (or a header block with “mobile menu” style). After a developer paste or section-group edit, that section can vanish from Current while the hamburger icon still paints as a dead button. Separately, the assigned Navigation menu can be empty or unpublished so the drawer opens to a blank panel — which buyers report as “menu not working.”

Fix path: Customize Current → header → enable Mobile menu / Menu drawer / Hamburger → assign the correct Navigation menu → Save / Publish Current. Theme editor publish failures are theme-editor-publish-failing. Broken header-group JSON is json-templates-section-groups-broken.

04

Hamburger JS unbound, or overlay / body scroll lock / aria-expanded / focus trap broken.

Native drawers depend on theme JS listening to the hamburger button, toggling an open class / dialog, locking body scroll, trapping focus inside the panel, and unlocking on overlay / X / Escape. A broken import, CSP / third-party script error, or an app that overrides event handlers can leave the icon clickable while the drawer never mounts — or mounts once and never closes. Separately, custom CSS, sticky headers, chat widgets, or consent banners can sit above the overlay (z-index), set pointer-events:none on the close control, or leave overflow:hidden on body after close so the page feels “frozen.”

Fix path: fix or remove the Console error that fires on first hamburger tap; inspect open/close listeners and aria-expanded; restore body scroll unlock on every close path; temporarily lower sticky header / chat z-index; hard-refresh without extensions. Consent banners blocking clicks are cookie-banner-blocking-checkout.

05

Second drawer app fighting native hamburger, or cart drawer stealing the same overlay.

Many themes share overlay / focus-trap helpers between the mobile nav drawer and the cart drawer. A cart-drawer app or a third-party mobile-menu builder (App embed + theme app block) can replace or freeze the native hamburger: embed off on Current, enabled only on a draft, scoped to Markets the buyer is not in, or set to own the overlay while the theme still renders a dead hamburger. Two drawers fighting one body scroll lock is a classic “opens once, never closes” failure.

Fix path: Theme settings → App embeds → enable one mobile-menu path on Current (or disable the app and use native drawer only) → Save. Retest hamburger open/close with the cart drawer closed. Temporarily disable the second drawer app. Cart-specific stuck drawers are cart-drawer-not-updating. Generic App embeds failing across many apps is app-embed-not-loading.

06

You tested mega menu, announcement bar, cart drawer, or sticky ATC instead.

Desktop mega menu / header dropdown not opening is shopify-megamenu-not-opening. Announcement / promo bar missing or hidden is shopify-announcement-bar-not-showing. Cart drawer not updating or stuck is cart-drawer-not-updating. Sticky add to cart missing is shopify-sticky-add-to-cart-missing. Do not chase desktop hover mega-menu or cart line-item settings when the broken control is the mobile hamburger / drawer.

The only honest test for this page: on a live phone-width storefront, tapping the hamburger either never opens the theme drawer, the drawer will not close (overlay / X / Escape / focus trap / body scroll), the drawer section is missing on Current, or Console / CSS shows errors / hides — fixable with theme mobile drawer on Current, hamburger JS errors cleared, overlay and body scroll unlock restored, aria-expanded / focus trap corrected, and one drawer path (native or one app) — not the desktop mega menu alone, not the announcement bar alone, not the cart drawer alone, not sticky ATC alone. Capture theme + JS + overlay + focus trap, fix the path. Anything else is a different product.

07

When to stay DIY vs pay $997.

Stay DIY if the theme mobile drawer is on Current, the hamburger opens and closes on a live phone-width storefront, Console is clean on tap, overlay / Escape / X unlock body scroll, and aria-expanded / focus trap behave. That is ordinary Shopify admin + theme work.

Pay $997 when the gap is wiring: lead capture, ops alerts, and a checkout-ready workflow on the stack you already pay for, installed in 72 hours after collaborator access lands. Latch does not sell an earnings, conversion, or menu-open lift number. Latch does not rebuild your theme’s header as a design agency. One live store. Clock starts when collaborator access is in.

Buy the 72-hour install — $997Merchant FAQAll playbooks