Kürzlich hat uns einer unserer Benutzer gefragt, wie man ein Sticky-Navigationsmenü für seine Website erstellt.
Sticky Navigationsmenüs bleiben auf dem Bildschirm, während Benutzer auf der Seite nach unten scrollen. Dadurch ist das obere Menü immer sichtbar, was der Benutzererfahrung zugutekommt, da es Links zu den wichtigsten Abschnitten Ihrer Website enthält.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein schwebendes Navigationsmenü in WordPress erstellen.
Was ist ein Sticky Floating Navigation Menu?
Ein Sticky- oder Floating-Navigationsmenü ist eines, das beim Scrollen des Benutzers nach unten am oberen Bildschirmrand ‚kleben‘ bleibt. Dadurch ist Ihr Menü für Benutzer jederzeit sichtbar.
Hier ist ein klebriges Menü in Aktion. Wir zeigen Ihnen, wie Sie ein Menü genau wie dieses für Ihre eigene Website erstellen:
Warum und wann können Sticky-Menüs nützlich sein?
Normalerweise enthält das obere Navigationsmenü Links zu den wichtigsten Abschnitten einer Website. Ein schwebendes Menü macht diese Links immer sichtbar, sodass Benutzer nicht nach oben scrollen müssen. Es ist auch erwiesen, dass es die Conversions erhöht.
Wenn Sie einen Online-Shop betreiben, enthält Ihr oberes Navigationsmenü wahrscheinlich Links zum Warenkorb, zu Produktkategorien und zur Produktsuche. Wenn Sie dieses Menü festhalten, können Sie das Abbrechen des Einkaufswagens reduzieren und den Umsatz steigern.
Einige der besten WordPress-Themes haben integrierte Unterstützung für ein klebriges Navigationsmenü. Sehen Sie einfach Ihre Theme-Einstellungen unter Themen » Anpassen um diese Funktion zu aktivieren.
Wenn Ihr Theme diese Option nicht hat, lesen Sie weiter und wir zeigen Ihnen, wie Sie ganz einfach ein schwebendes Navigationsmenü in jedem WordPress-Theme oder WooCommerce-Shop erstellen können.
Methode 1: Fügen Sie Ihr Sticky Floating-Navigationsmenü mit einem Plugin hinzu
Dies ist die einfachste Methode. Wir empfehlen es allen WordPress-Benutzern, insbesondere Anfängern.
Wenn Sie Ihr Navigationsmenü noch nicht eingerichtet haben, können Sie dies anhand unserer Anweisungen zum Hinzufügen eines Navigationsmenüs in WordPress tun.
Danach müssen Sie das installieren und aktivieren Sticky Menu (oder irgendetwas!) auf Scroll Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Einstellungen » Sticky Menu (oder irgendetwas!) Seite, um die Plugin-Einstellungen zu konfigurieren.
Zuerst müssen Sie die CSS-ID des Navigationsmenüs eingeben, das Sie kleben möchten.
Sie müssen das Prüftool Ihres Browsers verwenden, um die CSS-ID zu finden, die von Ihrem Navigationsmenü verwendet wird.
Besuchen Sie einfach Ihre Website und fahren Sie mit der Maus zum Navigationsmenü. Danach müssen Sie mit der rechten Maustaste klicken und im Menü Ihres Browsers Inspizieren 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 Site-Header bezieht. Es wird ungefähr so aussehen:
<nav id="site-navigation" class="main-navigation" role="navigation">
Wenn Sie Schwierigkeiten haben, es zu finden, bewegen Sie den Mauszeiger über die verschiedenen Codezeilen im Untersuchungsbereich. Das Navigationsmenü wird vollständig hervorgehoben, wenn Sie die richtige Codezeile haben:
In diesem Fall lautet die CSS-ID unseres Navigationsmenüs site-navigation.
Du musst lediglich die CSS-ID deines Menüs in den Plugin-Einstellungen mit einem Hash am Anfang eingeben. In diesem Fall ist das #site-navigation.
Vergessen Sie nicht, unten auf der Seite auf die Schaltfläche „Änderungen speichern“ zu klicken.
Schauen Sie sich jetzt Ihr Sticky-Menü live auf Ihrer WordPress-Website an. Es sollte auf der Seite bleiben, während Sie nach unten scrollen, wie folgt:
Die nächste Option auf der Einstellungsseite des Plugins besteht darin, 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, ignorieren Sie diese Einstellung.
Wir empfehlen, das Kontrollkästchen neben der Option „Auf Admin-Leiste prüfen“ aktiviert zu lassen. Dadurch kann das Plugin etwas Platz für die WordPress-Administrationsleiste hinzufügen, die nur für eingeloggte Benutzer sichtbar ist.
Hier sehen Sie, dass die Admin-Leiste auf unserer Testseite über dem Sticky-Menü korrekt angezeigt wird:
Mit der nächsten Option können Sie das Navigationsmenü aufheben, wenn ein Benutzer Ihre Website mit einem kleineren Bildschirm wie einem Mobilgerät besucht:
Sie können testen, wie Ihre Website auf Mobilgeräten oder Tablets aussieht. Wenn Ihnen das Aussehen nicht gefällt, 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 schwebenden Navigationsmenüs
Bei dieser Methode müssen Sie Ihrem Design benutzerdefinierten CSS-Code hinzufügen. Wir empfehlen es nicht für Anfänger.
Wir empfehlen Ihnen auch, einen Blick auf unsere Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Site zu werfen, bevor Sie beginnen.
Zuerst müssen Sie besuchen Aussehen » Anpassen um den WordPress Theme Customizer zu starten.
Klicken Sie anschließend im linken Bereich auf „Zusätzliches CSS“ und fügen Sie dann diesen CSS-Code hinzu.
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Notiz: Dadurch wird ein Navigationsmenü mit schwarzem Hintergrund erzeugt. Wenn Sie eine andere Farbe wünschen, ändern Sie die Zahl neben background. Zum Beispiel mit background: #ffffff gibt Ihnen einen weißen Menühintergrund.
Einfach ersetzen #site-navigation mit der CSS-ID Ihres Navigationsmenüs und klicken Sie dann oben auf dem Bildschirm auf die Schaltfläche Veröffentlichen.
Besuchen Sie Ihre Website, um Ihr schwebendes Navigationsmenü in Aktion zu sehen:
Was ist, wenn Ihr Navigationsmenü normalerweise unter dem Site-Header statt darüber angezeigt wird? In diesem Fall könnte dieser CSS-Code den Seitentitel und die Kopfzeile überlappen oder zu nahe daran erscheinen, bevor der Benutzer scrollt:
Dies kann leicht angepasst werden, indem Sie Ihrem Kopfzeilenbereich mithilfe von zusätzlichem CSS-Code einen Rand hinzufügen:
.site-branding {
margin-top:60px !important;
}
Ersetzen site-branding mit der CSS-Klasse Ihres Header-Bereichs. Jetzt überlappt das Sticky-Navigationsmenü nicht mehr Ihre Kopfzeile, bevor der Benutzer nach unten scrollt:
Wir hoffen, dieser Artikel hat Ihnen geholfen, Ihrer WordPress-Site ein schwebendes Navigationsmenü hinzuzufügen. Vielleicht möchten Sie auch unsere Anleitung zum Erstellen eines benutzerdefinierten WordPress-Themes ohne Code schreiben und unseren Vergleich der besten WordPress Page Builder-Plugins lesen.
