Menü an einem CSS-Selektor anzeigen

Anleitung Alle Tarife 3 Min. Lesezeit

Die App platziert Ihr Menü innerhalb jedes passenden Elements und ersetzt dessen Inhalt. Verwenden Sie das bei angepassten oder stark bearbeiteten Themes, bei denen Automatisch ersetzen und Vorhandenes Menü ersetzen nicht funktionieren, für eine bestimmte Stelle oder für Menüs nur für Desktop oder nur für Mobilgeräte.

Hinweis

Die App empfiehlt diese Option für Entwickler oder wenn die anderen Optionen nicht funktionieren. Sie sind mit CSS-Selektoren nicht vertraut? Kontaktieren Sie uns, und wir installieren das Menü kostenlos für Sie.

CSS-Selektoren einrichten

1. Menü an diesem CSS-Selektor anzeigen auswählen

   Klicken Sie im Menü-Editor in der linken Leiste auf den Tab Einstellungen. Wählen Sie unter Position die Option Menü an diesem CSS-Selektor anzeigen.

   

   Menü an diesem CSS-Selektor anzeigen mit seinen zwei Selektorfeldern

2. Selektoren eingeben

   Füllen Sie die beiden Felder aus, die unter Einstellungen beschrieben sind. Die grauen #SiteNav und #AccessibleNav sind Platzhalter, keine gespeicherten Werte.

3. Speichern und veröffentlichen

   Klicken Sie auf Speichern und veröffentlichen Sie dann das Menü. Prüfen Sie Ihren Shop auf dem Desktop und auf Mobilgeräten.

Einstellungen

CSS-Selektor Ihres Hauptmenüs

Das Element, das Ihr Desktop-Menü enthält, zum Beispiel #SiteNav, .header__inline-menu oder nav.main-menu. Lassen Sie es leer, um das Menü nur auf Mobilgeräten anzuzeigen.

CSS-Selektor Ihres mobilen Menüs

Das Element, das Ihr mobiles Menü enthält, zum Beispiel #AccessibleNav oder .menu-drawer. Lassen Sie es leer, um das mobile Menü Ihres Themes beizubehalten (nur Desktop).

• Mehrere Elemente – Trennen Sie Selektoren mit Kommas, zum Beispiel .header__inline-menu, .sticky-header nav. Das Menü wird in jeden Treffer eingefügt.
• Ein Element für beide Layouts – Geben Sie in beiden Feldern denselben Selektor ein. Die App schaltet je nach Bildschirmgröße zwischen Desktop- und Mobil-Layout um.
• Wählen Sie den Container, nicht einen einzelnen Link – Wählen Sie das Element, das das gesamte Menü umschließt (meist ein <nav> oder <ul>), sonst landet das Menü in einem einzelnen Menüpunkt.
• Bevorzugen Sie stabile Selektoren – IDs oder Theme-Klassen wie .header__inline-menu. Generierte Selektoren wie body > div:nth-child(3) > … brechen, wenn sich das Theme ändert.

Einen CSS-Selektor finden

Sie können auch unter den Feldern auf Wie finde ich den CSS-Selektor meines Menüs? klicken.

1. Menü untersuchen

   Öffnen Sie Ihren Shop in Chrome, klicken Sie mit der rechten Maustaste auf das Menü und wählen Sie Untersuchen.

2. Menü-Container finden

   Fahren Sie im Bereich Elemente über die Tags. Finden Sie das nächstgelegene <nav> oder <ul>, dessen Markierung das gesamte Menü abdeckt.

3. Selektor kopieren

   Verwenden Sie # plus seine id (#SiteNav) oder . plus eine eindeutige Klasse (.header__inline-menu). Andernfalls klicken Sie mit der rechten Maustaste auf das Tag, wählen Kopieren > Selektor kopieren und fügen den Selektor in die App ein.

4. Für Mobilgeräte wiederholen

   Klicken Sie in den DevTools auf das Gerätesymbol, wählen Sie ein Smartphone und öffnen Sie das mobile Menü (Hamburger-Symbol). Wiederholen Sie die Schritte, um den mobilen Selektor zu erhalten.

Tipp

Testen Sie einen Selektor, bevor Sie speichern: Führen Sie in der Konsole der DevTools document.querySelectorAll('your-selector') aus. Eine leere Liste bedeutet, dass der Selektor falsch ist.

Sie möchten das Menü dort, wo Ihr Theme gar kein Menü hat? Siehe Eine benutzerdefinierte Menüposition hinzufügen.

Verwandte Seiten

• Eine benutzerdefinierte Menüposition hinzufügenZeigen Sie das Menü genau dort an, wo Sie es möchten, indem Sie Ihren eigenen Container zum Theme-Code hinzufügen.
• Kann ich unterschiedliche Menüs für Desktop und Mobilgeräte verwenden?Zeigen Sie auf dem Desktop ein Menü und auf Mobilgeräten ein anderes an, oder blenden Sie einzelne Menüpunkte je Gerät aus.
• Warum wird mein Menü in meinem Shop nicht angezeigt?Eine Checkliste Schritt für Schritt, wenn das Menü in Ihrem Shop fehlt oder falsch aussieht.

War diese Seite hilfreich?

Problem melden