Wie man ein schwebendes Navigationsmenü in WordPress erstellt
Kürzlich fragte uns einer unserer Benutzer, wie er ein Sticky-Navigationsmenü für seine Website erstellen kann? Sticky-Navigationsmenüs bleiben auf dem Bildschirm, wenn Benutzer die Seite nach unten scrollen. Dadurch ist das oberste Menü immer sichtbar, was gut für die Benutzererfahrung ist, da es Links zu den wichtigsten Abschnitten Ihrer Website enthält.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein schwebendes Sticky-Navigationsmenü in WordPress erstellen können.
Was ist ein schwebendes Sticky-Navigationsmenü?
Ein klebriges oder schwebendes Navigationsmenü ist eines, das am oberen Rand des Bildschirms "klebt", wenn ein Benutzer nach unten scrollt.
Dadurch ist Ihr Menü für den Benutzer jederzeit sichtbar. Hier sehen Sie ein Sticky-Menü in Aktion. Wir zeigen Ihnen, wie Sie genau so ein Menü für Ihre eigene Website erstellen können: 
Warum und wann können Sticky-Menüs sinnvoll sein?
Normalerweise enthält das obere Navigationsmenü Links zu den wichtigsten Bereichen einer Website.
Ein schwebendes Menü macht diese Links immer sichtbar, was den Nutzern das Zurückscrollen zum Anfang erspart. Außerdem erhöht es nachweislich die Konversionen. Wenn Sie einen Online-Shop betreiben, dann enthält Ihr oberstes Navigationsmenü wahrscheinlich Links zum Warenkorb, zu den Produktkategorien und zur Produktsuche.
Wenn Sie dieses Menü "klebrig" machen, können Sie den Abbruch des Warenkorbs reduzieren und den Umsatz steigern. Einige der besten WordPress-Themes haben integrierte Unterstützung für ein Sticky-Navigationsmenü. Sehen Sie einfach in Ihren Theme-Einstellungen unter Themes " Anpassen nach, um diese Funktion zu aktivieren
Wenn Ihr Theme diese Option nicht hat, dann lesen Sie weiter, und wir zeigen Ihnen, wie Sie ganz einfach ein Sticky Floating Navigation Menu in jedem WordPress-Theme oder WooCommerce-Shop erstellen können.
Methode 1: Fügen Sie Ihr Sticky Floating Navigation Menu mit einem Plugin hinzu
Dies ist die einfachste Methode.
Wir empfehlen sie für alle WordPress-Benutzer, insbesondere für Anfänger. Wenn Sie Ihr Navigationsmenü noch nicht eingerichtet haben, können Sie dies anhand unserer Anleitung zum Hinzufügen eines Navigationsmenüs in WordPress nachholen. Danach müssen Sie das Sticky Menu (oder Anything!) on Scroll Plugin installieren und aktivieren.
Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Einstellungen " Sticky Menu (or Anything!) besuchen, um die Plugin-Einstellungen zu konfigurieren.
Zuerst müssen Sie die CSS-ID des Navigationsmenüs eingeben, das Sie sticky machen wollen. Sie müssen das Inspektionstool Ihres Browsers verwenden, um die CSS-ID zu finden, die von Ihrem Navigationsmenü verwendet wird. Besuchen Sie einfach Ihre Website und gehen Sie mit der Maus auf das Navigationsmenü.
Danach müssen Sie mit der rechten Maustaste klicken und "Inspect" aus dem Menü Ihres Browsers auswählen.
Dadurch wird Ihr Browser-Bildschirm geteilt, und Sie können den Quellcode für Ihr Navigationsmenü sehen.
Sie müssen eine Codezeile finden, die sich auf Ihre Navigation oder Ihren Seitenkopf bezieht. Sie wird etwa so aussehen: Wenn Sie Schwierigkeiten haben, sie zu finden, bewegen Sie den Mauszeiger über die verschiedenen Codezeilen im Inspektionsbereich
Das Navigationsmenü wird vollständig hervorgehoben, wenn Sie die richtige Codezeile gefunden haben: 
In diesem Fall lautet die CSS-ID unseres Navigationsmenüs site-navigation. Alles, was Sie tun müssen, ist, die CSS-ID Ihres Menüs in den Plugin-Einstellungen mit einer Raute am Anfang einzugeben. In diesem Fall ist das #site-navigation
Vergessen Sie nicht, unten auf der Seite auf die Schaltfläche "Änderungen speichern" zu klicken.
Jetzt können Sie sich Ihr Sticky-Menü auf Ihrer WordPress-Website live ansehen. Es sollte auf der Seite verbleiben, während Sie nach unten scrollen, etwa so: 
Die nächste Option auf der Einstellungsseite des Plugins ist es, den Abstand zwischen dem oberen Rand Ihres Bildschirms und dem Sticky-Navigationsmenü zu definieren. Sie müssen diese Einstellung nur verwenden, wenn Ihr Menü ein Element überlappt, das nicht ausgeblendet werden soll. Wenn nicht, dann ignorieren Sie diese Einstellung. Wir empfehlen, das Kästchen neben der Option: "Check for Admin Bar" aktiviert zu lassen.
Dadurch kann das Plugin etwas Platz für die WordPress-Adminleiste hinzufügen, die nur für eingeloggte Benutzer sichtbar ist. Hier können Sie sehen, dass die Admin-Leiste auf unserer Testseite korrekt über dem Sticky-Menü angezeigt wird: 
Mit der nächsten Option können Sie das Navigationsmenü lösen, wenn ein Benutzer Ihre Website mit einem kleineren Bildschirm, z.B. einem mobilen Gerät, besucht: 
Sie können testen, wie Ihre Website auf mobilen Geräten oder Tablets aussieht.
Wenn es Ihnen nicht gefällt, wie es aussieht, fügen Sie einfach 780px für diese Option hinzu. Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, nachdem Sie Änderungen an Ihren Optionen vorgenommen haben.
Methode 2: Manuelles Hinzufügen eines Sticky Floating Navigation Menu
Bei dieser Methode müssen Sie benutzerdefinierten CSS-Code zu Ihrem Thema hinzufügen.
Wir empfehlen diese Methode nicht für Anfänger. Wir empfehlen Ihnen auch, einen Blick auf unsere Anleitung zu werfen, wie Sie Ihrer WordPress-Site ganz einfach benutzerdefinierten CSS-Code hinzufügen können, bevor Sie beginnen. Zunächst müssen Sie den WordPress-Theme-Anpasser unter Darstellung " Anpassen starten
Als Nächstes klicken Sie im linken Bereich auf "Zusätzliches CSS" und fügen dann diesen CSS-Code ein.
#site-navigation { background:#00000; höhe:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; breite:100%; position:fixed; top:0; left:0; rechts:0; text-align: center; }
Hinweis: Dies erzeugt ein Navigationsmenü mit einem schwarzen Hintergrund. Wenn Sie eine andere Farbe wünschen, ändern Sie die Zahl neben background Wenn Sie zum Beispiel background: #ffffff erhalten Sie einen weißen Menühintergrund Ersetzen Sie einfach #site-navigation durch die CSS-ID Ihres Navigationsmenüs und klicken Sie dann auf die Schaltfläche Veröffentlichen am oberen Rand des Bildschirms
Besuchen Sie nun Ihre Website, um Ihr schwebendes Navigationsmenü in Aktion zu sehen: 
Was ist, wenn Ihr Navigationsmenü normalerweise unterhalb des Seitentitels erscheint, anstatt darüber? Wenn dies der Fall ist, könnte dieser CSS-Code den Seitentitel und den Header überlappen oder zu nahe daran erscheinen, bevor der Benutzer scrollt: 
Dies lässt sich leicht korrigieren, indem Sie mit zusätzlichem CSS-Code einen Rand zu Ihrem Header-Bereich hinzufügen:
.site-branding { margin-top:60px !important; }
Ersetzen Sie site-branding durch die CSS-Klasse Ihres Header-Bereichs.
Jetzt überlappt das Sticky-Navigationsmenü nicht mehr Ihre Kopfzeile, bevor der Benutzer nach unten scrollt.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, ein schwebendes Navigationsmenü zu Ihrer WordPress-Seite hinzuzufügen.