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

Öffnen Sie Ihren Shop in Chrome, wechseln Sie die DevTools zu einem mobilen Viewport, laden Sie neu und klicken Sie auf das Hamburger-Symbol. Wenn die Konsole vor dem Klick einen JavaScript-Fehler anzeigt, beheben Sie diesen zuerst. Ein fehlerhaftes App-Snippet kann das Header-Skript des Themes daran hindern, das Menü-Ereignis zu registrieren.

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>

Überprüfen Sie dann, ob das JavaScript immer noch mit diesen Selektoren übereinstimmt. Wenn Ihr Theme aktualisiert, von Dawn kopiert oder von einer Menü-App geändert wurde, kann eine Nichtübereinstimmung des Selektors das gesamte mobile Menü zerstören.

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