Warum sich Ihr Shopify-Mobilmenü nicht öffnet (und wie Sie es reparieren)

Sie rufen Ihren Shopify-Store auf dem Smartphone auf, tippen auf das dreizeilige Hamburger-Symbol, um eine Kollektion zu durchstöbern, und nichts geschieht. Oder das Menü-Panel zuckt kurz auf und schließt sich sofort wieder, oder die Hauptpunkte erscheinen, aber die Unterkategorien lassen sich nicht ausklappen. Wenn Kundinnen und Kunden die Navigation mobil nicht öffnen können, wird das Stöbern in Ihrem Shop deutlich schwerer.

Quick answer: why a Shopify mobile menu won’t open

Most Shopify mobile menus fail for one of three reasons: the drawer is hidden by CSS or broken theme markup, a hover-only dropdown fights with touch, or submenu links are not nested in Content > Menus. Duplicate your theme, check each cause in that order, and test on a real phone.

Dieser Leitfaden bezieht sich auf Shopify-Themes; Menüsysteme in WordPress oder Wix funktionieren grundlegend anders. Gehen Sie die unten beschriebenen Ursachen der Reihe nach auf einem duplizierten Test-Theme durch, damit Ihr aktiver Online-Shop während der Fehlersuche vollständig geschützt bleibt.

Three different problems: menu won’t open, opens the wrong way, submenu won’t expand

Wenn Shop-Betreiber melden, dass ihr Mobilmenü defekt sei, beschreiben sie eines von fünf häufigen Symptomen. Bevor Sie Einstellungen ändern oder Code bearbeiten, ordnen Sie Ihren Fall in der folgenden Tabelle ein:

Jedes Symptom weist auf eine andere technische Ebene Ihres Shops hin. Reagiert das Hamburger-Icon überhaupt nicht, kann ein fehlerhaftes Skript die Ursache sein oder ein Panel, das per CSS unsichtbar bleibt. Flackernde Menüs können dagegen von Hover-Regeln stammen, die für Mauszeiger gedacht sind und bei Touch-Eingaben seltsam reagieren. Beachten Sie, dass Header für Mobilgeräte und Desktops in einigen Themes getrennt konfiguriert werden können.

Before you edit code: duplicate your theme and test on a real phone

Bevor Sie Änderungen an Theme-Dateien oder Stylesheets vornehmen, sollten Sie Ihren Live-Store durch zwei grundlegende Vorsichtsmaßnahmen absichern.

Erstellen Sie zunächst eine Sicherheitskopie Ihres aktiven Themes. In der offiziellen Shopify-Dokumentation heißt es: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to” (Shopify-Anleitung zum Duplizieren von Themes). Gehen Sie in Ihrem Shopify-Adminbereich auf Online Store > Themes, klicken Sie neben Ihrem aktuellen Theme auf die drei Punkte (...) und wählen Sie Duplicate. Führen Sie alle Tests ausschließlich auf diesem Duplikat durch.

Zweitens: Prüfen Sie die Menüführung auf einem physischen Smartphone. Die responsive Ansicht der Desktop-Entwicklertools ist praktisch, entspricht aber nicht einem echten Smartphone. Shopify empfiehlt ausdrücklich, Menüs auf mobilen Endgeräten zu testen (Shopify-Leitfaden für Dropdown-Menüs), um sicherzustellen, dass sich Dropdowns wie erwartet öffnen. Ein echtes Gerät kann Touch-Probleme zeigen, die Desktop-Emulatoren womöglich übersehen.

Notieren Sie sich zudem kürzlich installierte Apps oder Skripte. Marketing-Tags, Google Tag Manager, SEO-Plugins oder Page-Builder können Skripte einbinden, die die Navigation stören. Prüfen Sie zuerst den Theme-Editor, da das Verhalten mobiler Menüs in vielen Themes direkt im Bereich Header gesteuert wird.

Hamburger icon does nothing: hidden drawer CSS and broken theme.liquid

Wenn das Antippen des Hamburger-Icons keinerlei Wirkung zeigt, liegt meist entweder ein JavaScript-Fehler vor, der das Öffnen-Ereignis abbricht, oder eine CSS-Regel hält das geöffnete Menü-Panel unsichtbar.

Check the browser console and recent apps

Starten Sie die Fehlersuche in der Entwicklerkonsole. Verbinden Sie Ihr Smartphone per USB-Debugging mit dem Computer oder öffnen Sie den Shop im Desktop-Browser bei mobiler Fensterbreite und rufen Sie die Entwicklertools auf (F12 oder Rechtsklick > Inspect).

Wechseln Sie zum Reiter Console und tippen Sie erneut auf das Hamburger-Symbol. Achten Sie auf rote Fehlermeldungen wie Uncaught TypeError oder SyntaxError. Ein nicht abgefangener Skriptfehler kann den Rest dieses Skripts stoppen, sodass das Menü-Skript Ihres Themes unter Umständen gar nicht erst läuft. Verweist der Fehler auf eine Drittanbieter-App, deaktivieren Sie das zugehörige App-Embed vorübergehend unter Online Store > Themes > Customize > App embeds, um zu prüfen, ob das Menü wieder reagiert.

Restore the top lines of theme.liquid

Zeigt die Konsole allgemeine Skriptausfälle über den gesamten Shop, untersuchen Sie das Haupttemplate. Die Datei layout/theme.liquid enthält das HTML-Grundgerüst der Seite, auf das sich Theme-Skripte stützen.

In einer Diskussion der Shopify Community wurde berichtet, dass das Mobilmenü eines Shops nicht mehr funktionierte, nachdem beim Hinzufügen eines Google-Tag-Manager-Tags die ersten beiden Zeilen der theme.liquid entfernt worden waren. Das ist eine von einem Shop-Betreiber gemeldete wahrscheinliche Ursache, keine offiziell bestätigte Lösung – es zeigt aber, warum fehlende Zeilen am Dateianfang eine Prüfung wert sind. Öffnen Sie Online Store > Themes > … > Edit code, öffnen Sie layout/theme.liquid und vergleichen Sie die ersten Zeilen mit einer unberührten Kopie desselben Themes, um Entferntes zu erkennen.

A CSS rule that forces the drawer visible (last resort)

Manchmal schaltet das JavaScript den Zustand des Menüs korrekt um, aber CSS-Eigenschaften halten den Drawer außerhalb des Bildschirms oder auf unsichtbar.

In einem Community-Thread zum Dawn-Theme bestätigte ein Nutzer, dass sein Drawer nach Ergänzung einer Media-Query in der base.css wieder sichtbar wurde (Shopify Community Thread 377163):

/* Example reported in a Shopify Community thread for Dawn theme base.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
  .menu-opening .menu-drawer {
    transform: translate(0);
    visibility: visible;
  }
}

In einem weiteren Fall bei einem anderen Theme funktionierte das Menü, nachdem visibility: visible zur Disclosure-Regel in der main.css hinzugefügt wurde (Shopify Community Thread 389597):

/* Example reported in a Shopify Community thread for main.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
.main-menu__disclosure.is-open > .main-menu__content {
  opacity: 1;
  visibility: visible;
}

Ähnlich fand ein Händler einen Selektor für geöffnete Details-Elemente hilfreich, etwa .js details[open] > .menu-drawer (Shopify Community Thread 395768).

Betrachten Sie diese CSS-Schnipsel ausschließlich als dokumentierte Beispiele für spezifische Themes und Versionen, keinesfalls als Universallösung. Selektoren unterscheiden sich je nach Theme-Aufbau stark. Zudem überdeckt ein erzwungenes CSS nur Symptome, wenn die Ursache in fehlerhaftem Markup liegt. Behalten Sie bei der Fehlersuche stets drei Diagnosebegriffe im Kopf: visibility hidden, broken theme.liquid und check the browser console.

Figure 1: Concept illustration — Diagram of a Shopify mobile drawer hidden by CSS next to the same drawer made visible after checking markup and styles.

Hover dropdowns on touch screens: open on tap instead

Wenn das Menü auf dem Smartphone kurz aufklappt und sofort wieder zuschnappt oder Untermenüs beim Antippen flackern, ist eine häufige Ursache eine Hover-Regel für den Desktop.

Laut MDN Web Docs beschreibt die Media-Query @media (hover: none) eine Umgebung, in der “the primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap)” (MDN-Dokumentation zu hover). Dagegen greift @media (hover: hover) dann, wenn “the primary input mechanism can conveniently hover over elements.”

Wenn benutzerdefiniertes CSS oder Desktop-Theme-Styles das Öffnen von Untermenüs an :hover binden, ohne die Geräteeigenschaften zu prüfen, versuchen Touchscreens möglicherweise, Hover zu emulieren. Dadurch kann sich ein Dropdown beim Antippen sofort öffnen und wieder schließen, oder das Antippen verhält sich nicht so, wie die Hover-Regel es erwartet.

Um diesen Konflikt zu lösen, stellen Sie sicher, dass Hover-Regeln ausschließlich auf echten Zeigegeräten aktiv sind:

/* Restrict hover behavior to devices with true pointer hover capability */
/* Placeholder selectors for illustration only: replace them with your theme's own classes. */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (hover: hover) {
  .header__menu-item:hover .header__submenu {
    display: block;
  }
}

Durch das Kapseln in @media (hover: hover) nutzen Smartphones und Tablets wieder die regulären Tipp-Mechanismen des Themes. Ein Untermenü per Hover zu öffnen ist auf Touch-Headern schwierig: In einer Community-Diskussion zum Dawn-Theme schrieb ein Helfer, er sehe dafür keine Lösung nur mit CSS – vermutlich braucht es JavaScript, oder Sie behalten das Standardverhalten des Themes bei.

Submenus that should expand: nesting, theme settings, and CSS

Werden Hauptmenüpunkte im Drawer dargestellt, die Unterpunkte bleiben jedoch verborgen, liegt die Ursache meist in der Strukturierung.

Prüfen Sie zuerst die Menü-Hierarchie im Shopify-Adminbereich unter Content > Menus. Wie in der Shopify-Anleitung für Dropdown-Menüs erläutert: “You can build drop-down menus by creating or moving menu items so that they’re nested below a top-level item.” Unterpunkte müssen im Menü-Editor unter dem übergeordneten Punkt verschachtelt sein; ein Eintrag, der nicht verschachtelt ist, bleibt ein Hauptmenüpunkt.

Shopify setzt zudem eine klare Begrenzung: “The top-level item can have up to two levels of nested drop-down menus.” Das ergibt maximal drei Ebenen:

1. Hauptebene (z. B. Bekleidung)
2. Erste Untermenü-Ebene (z. B. Damen)
3. Zweite Untermenü-Ebene (z. B. Jacken)

Auf Mobilgeräten behandeln viele Themes übergeordnete Einträge mit Unterpunkten als reine Aufklapp-Schalter statt als Seitenlinks. Ein Tippen öffnet die Liste, statt eine neue URL aufzurufen. Wenn Kundinnen und Kunden auch die Hauptkategorieseite erreichen sollen, fügen Sie einen separaten Unterpunkt (z. B. “Alle Produkte anzeigen”) ganz oben in der Liste ein.

Stimmt die Verschachtelung im Adminbereich, aber das Untermenü klappt mobil dennoch nicht auf, benötigt das Theme eventuell typografische oder stilistische Anpassungen. Shopify weist darauf hin: “Some themes might require CSS adjustments to improve mobile usability.” Achten Sie darauf, solche Regeln strikt auf mobile Media-Queries (wie @media (max-width: 749px)) und Menü-Selektoren zu begrenzen, um das Desktop-Layout nicht zu beeinträchtigen. Ausführliche Grundlagen finden Sie in unserem Shopify menu guide.

Drawer opens full width or the wrong style

Manchmal öffnet sich das Menü zwar, aber auf eine Weise, die die Bedienung erschwert. Manche Händler stellen fest, dass das Menü-Panel den gesamten Bildschirm einnimmt und den Shop dahinter verdeckt.

In Diskussionen schreiben einzelne Shop-Betreiber, dass sie sich einen Drawer wünschen, der nicht den ganzen Bildschirm verdeckt (Shopify Community Thread 275308). Ein Drawer, der die gesamte Anzeige einnimmt, verdeckt die Seite dahinter; ein sichtbarer abgedunkelter Streifen kann verdeutlichen, dass sich das Panel schließen lässt.

Prüfen Sie vor CSS-Eingriffen die Einstellungen Ihres Themes. In modernen Themes wird das Verhalten mobiler Menüs im Theme-Editor unter Header gesteuert. Einige Themes erlauben es zudem, den Header für Mobilgeräte und Desktops unabhängig voneinander anzupassen.

Bietet Ihr Theme keine native Breiten-Einstellung für den mobilen Drawer, können Sie auf einem Duplikat eine Begrenzung per CSS testen:

/* Example max-width constraint for a slide-out drawer on a duplicate theme; the value is only a placeholder, pick one that suits your design */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
  .menu-drawer {
    max-width: 80vw;
  }
}

Achten Sie darauf, dass drei Kernaspekte gewahrt bleiben: Das Verhalten Drawer opens full width wird eingegrenzt, der Hintergrundbereich overlay stays visible bleibt zum Schließen antippbar und ein gut erreichbarer easy close button steht oben bereit. Für Gestaltungsmuster von Drawern lesen Sie unseren Leitfaden zu mobile drawer menu best practices.

Figure 2: Concept illustration — Side-by-side phone mockups of a full-width Shopify mobile drawer and a partial-width drawer with the page visible behind.

Trade-offs: when code fixes stop being worth it

Das manuelle Beheben von Menü-Problemen über CSS- und Liquid-Dateien kann akute Fehler lösen, birgt jedoch langfristige Wartungskosten.

Erstens muss eigener Code nach Theme-Updates oft erneut eingefügt werden. In einer Diskussion zum Dawn-Theme schrieb ein Händler, dass ein Update auf Version 11.0 sein Menüproblem behoben habe, er seine individuellen Änderungen aber wieder hinzufügen müsse (Shopify Community Thread 259424). Nach einem Theme-Update müssen Änderungen, die Sie in Dateien wie base.css, main.css oder theme.liquid ergänzt haben, möglicherweise erneut eingefügt werden.

Zweitens sind Foren-Schnipsel stark theme-spezifisch. Der Selektor aus dem main.css-Beispiel (.main-menu__disclosure.is-open > .main-menu__content) unterscheidet sich grundlegend von dem im Dawn-base.css-Beispiel (.menu-opening .menu-drawer). Das Kopieren fremder CSS-Fragmente bewirkt möglicherweise nichts oder führt zu unerwarteten Darstellungsfehlern. Mehrere gestapelte Patches machen die Fehlersuche zusätzlich schwerer.

Es gibt jedoch klare Fälle, in denen Sie KEINE App installieren sollten:

• Eine fehlende Markup-Zeile: Wurden in theme.liquid lediglich die ersten Zeilen beim Hinzufügen eines Tags oder einer App entfernt, kann die Wiederherstellung dieser Zeilen die sauberste Lösung sein.
• Vorhandene Theme-Optionen: Wenn Ihr Theme bereits Schalter für Drawer-Breite oder Untermenü-Darstellung im Header-Bereich mitbringt, ist die Nutzung dieser nativen Optionen meist der einfachere Weg.
• Zusätzlicher Einrichtungsaufwand: Jede App bedeutet eine zusätzliche Komponente, die konfiguriert und gepflegt werden muss.

Where Navi+ fits

Wenn die bordeigene Navigation Ihres Themes nicht die gewünschten Anpassungsmöglichkeiten bietet oder Sie manuelle CSS-Wartung bei Theme-Updates vermeiden möchten, stellt Navi+ eine modulare Alternative dar.

Navi+ Mobile Menu bietet ein dediziertes Drawer-Menü, das vollständig über das App-Interface gesteuert wird:

• Individuelle Drawer-Breite: Passen Sie die Breite des Mobilmenüs in den App-Einstellungen an (neue Menüs starten mit einer Voreinstellung von 80 %), damit das Panel den Bildschirm nicht vollständig überdecken muss.
• Flexible Untermenü-Darstellung: Wählen Sie, ob Untermenüs horizontal in ein neues Panel gleiten oder sich vertikal als Akkordeon an Ort und Stelle öffnen.
• Hintergrund-Overlay und Scroll-Sperre: Sie können ein Hintergrund-Overlay und eine Scroll-Sperre der Seite bei geöffnetem Drawer festlegen; Menüs unterstützen bis zu drei Navigationsebenen.
• Sticky Tab Bar: Ergänzen Sie das Hamburger-Menü um eine feste Navigationsleiste am unteren Bildschirmrand, die beim Stöbern sichtbar bleibt.

Wichtig für die Einordnung: Navi+ repariert keine beschädigten Theme-Dateien und patcht keine fehlerhaften Theme-Drawer. Es ersetzt vielmehr das Theme-Menü durch ein eigenständiges System, wenn Sie keinen Code bearbeiten möchten.

If you’ve re-applied the same menu fix after every theme update, you can try building the mobile drawer in Navi+ instead — set the drawer width and submenu style in the app, preview it on your phone, and keep your theme files untouched.

Weiterführende Tipps zur passenden Navigationsarchitektur finden Sie in unseren Ratgebern: choose the right menu type und bottom tab bar on mobile.

Action checklist after the fix

Nachdem Sie Anpassungen auf Ihrem Test-Theme vorgenommen haben, prüfen Sie diese 7 Punkte vor der Live-Schaltung:

• Zuverlässiges Öffnen und Schließen: Der Drawer öffnet sofort beim Antippen des Hamburger-Icons und schließt sowohl über das X als auch beim Tippen auf den abgedunkelten Hintergrund.
• Fehlerfreies Ausklappen von Untermenüs: Unterkategorien öffnen sich ohne Ruckeln oder unbeabsichtigte Seitenaufrufe.
• Ausreichende Touch-Flächen: Prüfen Sie, dass alle Menüpunkte und Icons das Kriterium WCAG 2.2 SC 2.5.8 mit einer Mindestgröße von 24 x 24 CSS-Pixeln erfüllen, mit einigen Ausnahmen (W3C-Vorgaben für Zielgrößen).
• Plattformübergreifender Test: Testen Sie das Theme sowohl auf iOS (Safari) als auch auf Android (Chrome) auf echtem Glas.
• Code-Änderungen dokumentieren: Halten Sie ergänzte CSS-Regeln schriftlich fest, um sie bei künftigen Theme-Updates griffbereit zu haben.
• Sichtbare Navigationsalternativen prüfen: Wie das Nielsen Norman Group Research betont: “the hamburger menu is not so universal that everyone knows it or immediately looks for it” (NN/g-Forschung zu mobiler Navigation). Prüfen Sie ergänzende Optionen wie navigation beyond the hamburger menu.
• Nur geprüfte Themes veröffentlichen: Veröffentlichen Sie das bearbeitete Theme erst, nachdem alle Prüfungen bestanden sind.

FAQ

Why won’t my Shopify hamburger menu open?

Am häufigsten wird das Drawer-Element durch überschreibendes CSS verborgen oder essenzielle Anfangs-Tags in theme.liquid wurden beim Hinzufügen eines Tags oder Skripts gelöscht. Prüfen Sie die Browser-Konsole auf JavaScript-Fehler und testen Sie kürzlich hinzugefügte Apps.

How do I make a submenu open when I tap the parent item?

Ziehen Sie im Shopify-Admin unter Content > Menus die Unterpunkte direkt unter den übergeordneten Menüpunkt, sodass sie eingerückt sind. Viele Themes wandeln übergeordnete Punkte mit Kindern mobil in Aufklapp-Schalter um; abweichendes Verhalten erfordert Theme-Einstellungen oder CSS.

How many submenu levels does Shopify support?

Die Shopify-Navigation unterstützt einen Haupteintrag mit bis zu zwei verschachtelten Untermenü-Ebenen darunter, also maximal drei Ebenen insgesamt. Ihr aktives Storefront-Theme muss die Darstellung aller drei Ebenen möglicherweise ebenfalls unterstützen.

Will my CSS fix disappear when I update my theme?

Oft ja. Eigener Code in base.css oder main.css muss nach einem Update auf eine neue Theme-Version häufig erneut hinzugefügt werden. Erstellen Sie vorab stets ein Duplikat und dokumentieren Sie eigene CSS-Anpassungen sorgfältig.

Why do hover menus misbehave on phones?

Viele Touchscreens können nicht bequem hovern; laut MDN emulieren viele mobile Geräte Hover nur bei einem unbequemen langen Tippen. Wird eine Desktop-:hover-Regel per Berührung ausgelöst, kann sich ein Dropdown unerwartet öffnen und wieder schließen.

Can I change the width of the mobile drawer?

Je nach Theme können Sie die Breite des Drawers direkt im Theme-Editor unter Header anpassen. Fehlt diese Option, lässt sich eine max-width per CSS-Media-Query hinterlegen oder eine spezialisierte Menü-App nutzen.

Sources

• Shopify Help Center: Drop-down menus (help.shopify.com)
• Shopify Help Center: Duplicating themes (help.shopify.com)
• MDN Web Docs: @media (hover) (developer.mozilla.org)
• W3C: WCAG 2.2 Target Size (Minimum) (w3.org)
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger (nngroup.com)
• fudge.ai: How to Change Mobile Menu Behavior in Shopify (fudge.ai)
• Shopify Community: Why isn’t my online store menu opening on mobile devices? (community.shopify.com)
• Shopify Community: Why is my menu not showing on mobile when I click the hamburger icon? (community.shopify.com)
• Shopify Community: Mobile menu is not working for my store (community.shopify.com)
• Shopify Community: Menu doesn’t work on mobile (community.shopify.com)
• Shopify Community: Why is the mobile menu not functioning on Dawn theme? (community.shopify.com)
• Shopify Community: How to fix a menu opening fully on mobile? (community.shopify.com)
• Shopify Community: Dawn theme header expand without clicking (community.shopify.com)