Shopify Mobile-Menü funktioniert nicht: Theme-JavaScript-, App- und CSS-Korrekturen (2026)

Schnelle Lösung mit Thunder

Finden Sie zunächst heraus, ob der Klick, die Schublade oder die Überlagerung defekt ist

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.

Wenn kein Fehler vorliegt, überprüfen Sie die Hamburger-Taste. Es sollte über eine ID, ein ARIA-Steuerelement, ein benutzerdefiniertes Element oder ein Datenattribut auf ein echtes Schubladenelement verweisen. Bei benutzerdefinierten Kopfzeilenbearbeitungen wird die Schublade häufig umbenannt, die Schaltfläche zeigt jedoch weiterhin auf das alte Ziel.

Überprüfen Sie die Seite auch auf unsichtbare Überlagerungen. Cookie-Banner, Popup-Apps, Sticky-Ankündigungsleisten und Menü-Apps können hoch oben über der Kopfzeile platziert werden Z-Index. Informationen zu Problemen mit dem Kaufpfad in der Nähe finden Sie unter Anleitung zum Hinzufügen von Schaltflächen zum Warenkorb, Checkliste zum Debuggen der Einkaufswagenschublade, und App-Skript-Bereinigungsanleitung.

Stellen Sie die mobile Menütaste und den Schubladenvertrag wieder her

Die meisten Shopify-Themes verwenden eine Schaltfläche, eine Schublade und ein kleines Skript, das eine offene Klasse oder ein offenes Attribut umschaltet. Die Namen unterscheiden sich je nach Thema, aber der Vertrag ist derselbe: Durch Klicken auf die Schaltfläche wird die Schublade geöffnet, durch Scrollen im Körper wird die Schublade gesperrt, durch Escape wird geschlossen und mit der Schaltfläche „Schließen“ wird der Zustand umgekehrt.

<button
  type="button"
  class="header__menu-toggle"
  aria-controls="MobileMenuDrawer"
  aria-expanded="false"
  data-mobile-menu-toggle>
  <span class="visually-hidden">Menü öffnen</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);
});

Fügen Sie dies nur in einem duplizierten Theme hinzu und passen Sie es an die bestehende Struktur Ihres Themes an. Wenn Ihr Theme bereits über ein benutzerdefiniertes Element für die Kopfleiste verfügt, reparieren Sie den defekten Selektor, anstatt eine doppelte Menülogik hinzuzufügen.

Überprüfen Sie CSS, das das Shopify Mobile-Menü tot aussehen lässt

Manchmal öffnet sich das Menü, aber Käufer können es nicht sehen oder darauf tippen. Untersuchen Sie die Schublade, nachdem Sie auf das Hamburger-Symbol geklickt haben. Suchen Sie nach Anzeige:keine, Sichtbarkeit: ausgeblendet, Deckkraft:0, Off-Screen-Transformationen, niedrig Z-Indexund übergeordnete Container mit Überlauf: ausgeblendet.

Eine sichere Schublade benötigt ein vorhersehbares mobiles Layout: feste Positionierung, einen Z-Index über der Kopf- und Ankündigungsleiste, sichtbaren Hintergrund und einen scrollbaren Menübereich. Vermeiden Sie die Verwendung großer Symbolschriftarten oder App-Widgets in der Schublade, da diese beim ersten Tippen zu einer Verzögerung führen.

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

Deaktivieren Sie App-Einbettungen und Skriptoptimierer in einem duplizierten Theme

Fehler im mobilen Menü treten häufig nach der Installation eines Popups, eines Seitenerstellers, eines Sticky-Headers, einer Übersetzung, einer Überprüfung oder einer Geschwindigkeits-App auf. Duplizieren Sie Ihr Live-Theme, deaktivieren Sie App-Einbettungen und testen Sie es erneut. Wenn das Menü funktioniert, aktivieren Sie die Apps nacheinander erneut, bis der Fehler erneut auftritt.

Seien Sie besonders vorsichtig bei Tools, die jedes Skript standardmäßig zurückstellen. Wichtige Theme-Skripte für Navigation, Produktformulare, Warenkörbe und Suche sollten zum Zeitpunkt der Interaktion verfügbar bleiben. Befolgen Sie für eine umfassendere Bereinigung die Anweisungen vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, Shopify INP-Leitfaden, und Anleitung zur Bereinigung nicht verwendeter Codes.

Wenn eine alte App entfernt wurde, das Menü aber immer noch fehlschlägt, führen Sie die aus Checkliste für Shopify-App-Reste. Verwaiste Ausschnitte in theme.liquid sind ein häufiger Grund für den Ausfall von JavaScript nur für Mobilgeräte.

Manueller Fix vs. Thunder Fix

Vergleichen Sie für größere Aufräumprojekte Thunder-Preise mit professionelle Shopify-Geschwindigkeitsoptimierung.

FAQ