Das obere Navigationsmenü einer Website enthält normalerweise Links zu allen wichtigen Seiten. Wenn Sie dieses Menü zu einem Sticky-Menü machen, können Sie es beim Scrollen des Benutzers auf der Seite am oberen Rand halten. So ist es immer in Reichweite.
Dies macht die Navigation zugänglicher und ermöglicht es Benutzern, schnell zu verschiedenen Bereichen Ihrer Website zu springen, ohne zum Anfang zurückscrollen zu müssen. Unserer Meinung nach kann die Verwendung eines Sticky-Menüs dazu beitragen, das Engagement zu steigern und die allgemeine Benutzerfreundlichkeit der Website zu verbessern.
In diesem Artikel zeigen wir Ihnen, wie Sie Ihrer WordPress-Website ganz einfach ein Sticky-Navigationsmenü hinzufügen.
Was ist ein festes schwebendes Navigationsmenü?
Ein Sticky- oder Floating-Navigationsmenü „klebt“ beim Scrollen des Benutzers am oberen Bildschirmrand, sodass es jederzeit sichtbar ist.
Normalerweise enthält das obere Navigationsmenü in WordPress Links zu den wichtigsten Inhalten Ihrer Website. Indem Sie dieses Menü fixieren, können Besucher jederzeit auf diese Links klicken, ohne scrollen zu müssen.
Wenn Sie einen Online-Shop betreiben, enthält das obere Navigationsmenü normalerweise Links zu Seiten, die auf Konversionen ausgelegt sind, wie z. B. die Checkout-Seite und den Kunden-Warenkorb. Indem Sie das obere Menü fixieren, können Sie oft die Abbruchraten im Warenkorb reduzieren und mehr Verkäufe erzielen.
Vor diesem Hintergrund sehen wir uns an, wie Sie ganz einfach ein fixiertes, schwebendes Navigationsmenü in jedem WordPress-Theme oder WooCommerce-Shop erstellen können. Verwenden Sie einfach die Schnelllinks unten, um zu der Methode zu springen, die Sie verwenden möchten:
Methode 1: Ein fixiertes Menü über die Theme-Einstellungen hinzufügen (Einfach)
Einige der besten WordPress-Themes haben eine integrierte Unterstützung für fixierte Navigationsmenüs. Daher lohnt es sich, Ihre Theme-Einstellungen zu überprüfen, indem Sie im WordPress-Dashboard zu Themes » Anpassen gehen und nach Einstellungen suchen, die mit „Menüs“ beschriftet sind.
Wenn Sie nicht sicher sind, ob Ihr Theme fixierte Menüs unterstützt, können Sie die Dokumentation des Themes überprüfen oder sich sogar an den Entwickler wenden, um Hilfe zu erhalten. Weitere Informationen finden Sie in unserem Leitfaden, wie Sie richtig um WordPress-Support bitten und ihn erhalten.
Wenn Ihr Theme keine integrierte Unterstützung für Sticky-Menüs hat, müssen Sie eine der anderen unten aufgeführten Methoden verwenden.
Methode 2: Fügen Sie Ihr Sticky-Navigationsmenü mit einem Plugin hinzu (empfohlen)
Der einfachste Weg, ein fixiertes Navigationsmenü in WordPress hinzuzufügen, ist die Verwendung des Sticky Menu & Sticky Header Plugins. Es ermöglicht Ihnen, alles zu fixieren, einschließlich Menüs.
Zuerst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Anfängerleitfaden zur Installation eines WordPress-Plugins.
Gehen Sie nach der Aktivierung zu Einstellungen » Sticky Menu (oder irgendetwas!).
Zuerst müssen Sie die CSS-ID des Navigationsmenüs ermitteln, das Sie fixieren möchten, indem Sie das Inspektionstool Ihres Browsers verwenden.
Besuchen Sie einfach Ihre Website und bewegen Sie den Mauszeiger über das Navigationsmenü. Klicken Sie dann mit der rechten Maustaste und wählen Sie im Menü des Browsers 'Untersuchen'.
Dies öffnet ein neues Panel im Browser, in dem Sie den Quellcode für das Navigationsmenü sehen können.
Sie müssen die Codezeile finden, die sich auf das Menü oder den Header Ihrer Website bezieht. Sie wird ungefähr so aussehen:
<nav id="site-navigation" class="main-navigation" role="navigation">
Wenn Sie Schwierigkeiten haben, den Code zu finden, bewegen Sie den Mauszeiger über die verschiedenen Codezeilen im 'Inspizieren'-Bereich. Wenn Sie den richtigen Code gefunden haben, hebt der Browser das Navigationsmenü hervor, wie Sie im folgenden Bild sehen können.
In diesem Fall ist die CSS-ID des Navigationsmenüs site-navigation.
Sobald Sie diese Informationen haben, wechseln Sie zurück zu Ihrem WordPress-Dashboard und fügen Sie sie in das Feld „Sticky Element (Erforderlich)“ ein.
Sie müssen auch ein Hash-Zeichen (#) am Anfang hinzufügen, sodass site-navigation zu #site-navigation wird.
Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“ am unteren Rand der Seite, um Ihre Änderungen zu speichern.
Wenn Sie nun Ihre WordPress-Website besuchen und scrollen, sollte das Menü oben bleiben.
Manchmal kann das Sticky-Menü einige Inhalte überlappen, die Sie nicht ausblenden möchten.
Wenn dies geschieht, müssen Sie einen Abstand zwischen dem oberen Rand Ihres Bildschirms und dem Sticky-Navigationsmenü definieren, indem Sie eine Zahl in das Feld „Abstand zwischen dem oberen Seitenrand und dem Sticky-Element“ eingeben.
Fixierte Menüs können Probleme für Geräte mit kleineren Bildschirmen, wie z. B. Mobilgeräte, verursachen. Vor diesem Hintergrund ist es eine gute Idee, die mobile Version Ihrer WordPress-Website von Ihrem Desktop aus zu überprüfen.
Wenn Sie mit dem Aussehen des Menüs nicht zufrieden sind, können Sie es für mobile Benutzer „entfernen“, indem Sie das folgende Feld finden: „Element nicht fixieren, wenn der Bildschirm kleiner ist als.“
Geben Sie hier „780px“ ein.
Es gibt noch weitere Einstellungen zu erkunden, aber das ist alles, was Sie benötigen, um ein funktionierendes Sticky-Navigationsmenü zu erstellen.
Wenn Sie mit der Einrichtung des Navigationsmenüs zufrieden sind, klicken Sie auf „Änderungen speichern“, um Ihre Einstellungen zu speichern.
Methode 3: Ein klebendes schwebendes Navigationsmenü mit Code hinzufügen
Sie können auch ein fixiertes Navigationsmenü mit CSS erstellen.
Der beste Weg, benutzerdefinierten Code zu WordPress hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste Code-Snippet-Plugin, mit dem Sie benutzerdefiniertes CSS, PHP, HTML und mehr hinzufügen können.
Da Sie die Theme-Dateien nicht direkt bearbeiten, können Sie viele häufige WordPress-Fehler vermeiden. Sie können Ihr Theme auch aktualisieren oder zu einem komplett anderen Theme wechseln, ohne Ihren benutzerdefinierten Code zu verlieren.
Sie können das Sticky-Menü auch mit einem einzigen Klick ein- und ausschalten.
Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserem Schritt-für-Schritt-Leitfaden zur Installation eines WordPress-Plugins.
Sobald das Plugin aktiviert ist, gehen Sie zur Seite Code Snippets » + Snippet hinzufügen, wo Sie alle fertigen WPCode-Snippets sehen, die Sie zu Ihrer Website hinzufügen können.
Dazu gehören ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Anhangsseiten deaktivieren und vieles mehr.
Bewegen Sie hier einfach die Maus über „Benutzerdefinierten Code hinzufügen (Neuer Ausschnitt)“ und klicken Sie auf die Schaltfläche „Ausschnitt verwenden“, wenn sie erscheint.
Auf dem nächsten Bildschirm müssen Sie einen Titel für den Code-Ausschnitt eingeben. Dies dient nur Ihrer Referenz, daher können Sie alles verwenden, was Sie möchten.
Öffnen Sie dann das Dropdown-Menü „Code-Typ“ und wählen Sie „CSS-Snippet“.
Wenn das erledigt ist, fügen Sie den folgenden Ausschnitt zum WPCode-Code-Editor 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;
}
Dies erstellt ein Navigationsmenü mit schwarzem Hintergrund. Sie können jede gewünschte Farbe verwenden, indem Sie den Hex-Code neben background ändern.
Zum Beispiel gibt Ihnen die Verwendung von background: #ffffff einen weißen Menühintergrund. Wenn Sie sich nicht sicher sind, welchen Hex-Code Sie verwenden sollen, können Sie eine Ressource wie HTML-Farbcode konsultieren.
Sie müssen auch #site-navigation durch die CSS-ID Ihres Navigationsmenüs ersetzen. Um diesen Code zu finden, folgen Sie einfach demselben Prozess, der oben beschrieben wurde.
Wenn Sie mit dem Code zufrieden sind, klicken Sie auf den Umschalter 'Inaktiv', damit er zu 'Aktiv' wechselt, und klicken Sie dann auf die Schaltfläche 'Snippet speichern'.
Wenn Sie nun Ihren WordPress-Blog oder Ihre Website besuchen, sehen Sie das Sticky-Floating-Navigationsmenü in Aktion.
Je nach Theme kann das Navigationsmenü manchmal unter dem Website-Header erscheinen, anstatt darüber. In diesem Fall kann das Sticky-Navigationsmenü zu nah am Website-Titel und Header erscheinen oder ihn sogar überlappen.
Wenn dies geschieht, können Sie Folgendes zu Ihrem benutzerdefinierten CSS-Snippet hinzufügen:
.site-branding {
margin-top:60px !important;
}
Ersetzen Sie einfach site-branding durch die CSS-Klasse Ihres Header-Bereichs. Um diese Informationen zu erhalten, verwenden Sie einfach das 'Inspizieren'-Tool Ihres Browsers und folgen Sie dann demselben Prozess, der in Methode 2 beschrieben ist.
Bonus: Machen Sie Ihre WordPress-Beiträge Sticky
Wenn Sie einen WordPress-Blog haben, ist es eine gute Idee, einige Ihrer Blogbeiträge fixiert zu machen. Dies können die Leitartikel sein, die die wichtigsten Inhalte Ihrer Website enthalten, oder Ankündigungen und Giveaway-Beiträge, mit denen Sie möchten, dass Benutzer interagieren.
Wenn Sie einen Beitrag Ihrer Wahl als „Sticky“ markieren, bleibt dieser am oberen Rand Ihrer Blog-Seite, auch wenn Sie neue Inhalte veröffentlichen, die unter dem „Sticky“-Beitrag angezeigt werden.
Sie können Ihren Blog-Beitrag ganz einfach als „Sticky“ markieren, indem Sie ihn im Inhaltseditor öffnen. Sobald Sie dies getan haben, erweitern Sie einfach den Tab „Zusammenfassung“ im Block-Panel und aktivieren Sie die Option „Oben im Blog anheften“.
Klicken Sie danach oben auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern. Sie haben nun erfolgreich einen Sticky-Blogbeitrag auf Ihrer WordPress-Website erstellt.
Weitere Details finden Sie in unserem Tutorial zum Thema Beiträge in WordPress anheften.
Wir hoffen, dieser Artikel hat Ihnen geholfen, ein festes schwebendes Navigationsmenü zu Ihrer WordPress-Seite hinzuzufügen. Möglicherweise möchten Sie auch unseren Leitfaden für Anfänger zum Thema Hinzufügen eines Schiebe-Panel-Menüs in WordPress-Themes und unser Tutorial zum Thema Hinzufügen von Social-Media-Symbolen zum WordPress-Menü lesen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Dennis Muthomi
Gibt es eine Möglichkeit, das Sticky-Menü nur für bestimmte Beiträge/Seiten anzuwenden? Zum Beispiel, dass es auf der Homepage meines Blogs nicht sticky ist, aber überall sonst auf der Website sticky ist?
WPBeginner Support
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Admin
Mrteesurez
Gut gemacht, ich freue mich, das Plugin zu sehen, das Sie hier geteilt haben "Sticky Menu oder (alles) beim Scrollen". Das bedeutet, dass es verwendet werden kann, um beliebige Elemente außer dem Menü "sticky" zu machen.
Anfangs habe ich dafür rohen Code verwendet, danke, dass Sie diese einfache Methode geteilt haben.
Dayo Olobayo
Ich stimme Ihnen zu, Mrteesurez, Sticky-Menüs sind ein wertvolles Website-Feature. Neben der Erstellung eines Sticky-Menüs könnten Sie auch einen „Smooth Scroll“-Effekt in Betracht ziehen, um die Benutzererfahrung beim Navigieren zwischen Abschnitten auf Ihrer Webseite weiter zu verbessern.
Jiří Vaněk
Danke für das Tutorial. Ich habe immer nach einer Vorlage gesucht, die das im Grunde tun kann. Laut dieser Anleitung muss ich das nicht mehr tun.
WPBeginner Support
Glad we could help open up your theme options
Admin
Paul
Wo hinterlasse ich die 5 Sterne…..vielen Dank!!
WPBeginner Support
Glad our guide was helpful
Admin
Jess
Vielen, vielen Dank für diesen hilfreichen Beitrag!!! So klar und einfach zu befolgen.
WPBeginner Support
Glad our guide was helpful
Admin
Ivaylo
Tolles praktisches Tutorial. Ich habe Methode 2 angewendet und sie hat sofort funktioniert. Wenn ich die Website jedoch auf dem Handy öffne, sind die Schaltflächen im Menü verschwunden. Weiß jemand, warum oder wie man das beheben kann?
Prost!
WPBeginner Support
Wenn Sie dies noch nicht getan haben, empfehlen wir Ihnen, den Support Ihres spezifischen Themes zu kontaktieren, um zu prüfen, ob es einen Konflikt mit dem CSS Ihres Themes gibt.
Admin
Serena Richardson
Hallo,
Wie erstelle ich ein festes schwebendes Menü unten auf der rechten Seite einer Seite, anstatt oben, sodass es sich beim Scrollen nach unten bewegt.
Danke!
Serena
WPBeginner Support
Das wäre das Hinzufügen eines „Sticky“-Widgets, für das wir eine Empfehlung in unserem Artikel unten haben:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Admin
Tom Browne
Funktionierte sofort. Danke
WPBeginner Support
You’re welcome
Admin
simran
Grad der Perfektion und die Art und Weise, wie die Informationen präsentiert werden... vielen Dank..
WPBeginner Support
Glad our guide was helpful
Admin
Theo
Wo finde ich die ID meiner Navigationsleiste?
Ich kann sie nicht finden.
WPBeginner Support
Dazu würden Sie das Element untersuchen. Wir haben unten eine Anleitung, wie Sie das Element richtig untersuchen:.
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Admin
Natasha T
Ein Lebensretter, ich kann Ihnen nicht genug danken.
WPBeginner Support
You’re welcome
Admin
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
WPBeginner Support
Glad our article was helpful
Admin
alexandre
Genau das, wonach ich gesucht habe! Tolles Plugin. Danke
WPBeginner Support
You’re welcome, glad you found our recommendation helpful
Admin
Guy Bailey
Vielen Dank für Ihre Hilfe – nur eine kleine Frage; der Hintergrund meines Menüs ist beim Scrollen nach unten transparent. Gibt es schnelle Lösungen oder Tricks, um eine solide Farbe dahinter zu legen (in unserem Fall weiß)?
WPBeginner Support
Das würde davon abhängen, wie Ihr Menü eingerichtet ist, aber Sie können das Element untersuchen, um das Objekt zu finden, dem Sie die Eigenschaft background-color zuweisen können: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Manish
Danke. Wenn Wpbeginner einen Blogbeitrag zu einem Thema schreibt, ist er mit Sicherheit hilfreich.
WPBeginner Support
Glad our content has been helpful
Admin
Everest
Vielen Dank.
Du hast meinen Tag gerettet.
WPBeginner Support
You’re welcome, glad we could help
Admin
Tony Chung
Der CSS-Code hat funktioniert und ich musste dem Header einen Rand hinzufügen, damit der gesamte Titel angezeigt wird. Meine Menüleiste erstreckt sich über die gesamte Breite, aber die Menüschaltflächen beginnen links und enden in der Mitte. Wie zentriere ich die Schaltflächen auf der Seite?
WPBeginner Support
Das würde von Theme zu Theme variieren, aber normalerweise müssten Sie das CSS ändern. Sie können Änderungen mit dem Element-Inspektor testen: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Chinedu
Wow, das funktioniert perfekt.
Danke
WPBeginner Support
Glad our solution worked for you
Admin
Gillian Davies
Ich habe eine Liste von Büchern in einer Tabelle. Ich habe die Bilder ihrer Titelseiten in die Mediathek importiert, jetzt möchte ich, dass die Bilder beim Scrollen durch die Liste als Viewer angezeigt werden. Ähnlich wie ein Zeilen-Hover, aber wie mache ich das in einer Tabelle, die im Tabellenersteller erstellt wurde?
Raul
Wie kann ich dieses feste Navigationsmenü scrollbar machen?
Ich habe es für eine Seitenleiste verwendet, aber wenn die Seitenleiste zu lang ist, passt sie nicht auf den Bildschirm und ich kann sie nicht nach unten scrollen.
Rushikesh Thawale
Hallo,
Wie haben Sie den Code WIE EIN CODE in diesem Beitrag geschrieben? Ich meine, wie zeige ich HTML-Codes wie diesen in einem Beitrag an?
Danke.
Tara
Sie haben es wahrscheinlich inzwischen herausgefunden, aber für diejenigen, die suchen: Um Ihren Code in Ihrem Beitrag anzuzeigen, verwenden Sie das HTML-Zeichen für die öffnende Klammer der HTML-Tags < ; ohne Leerzeichen.
WPBeginner Support
Das ist eine Methode, aber dafür verwenden wir die zweite Methode in unserem Artikel hier: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Admin
Cesar
Great post! your CSS code works for me
dani
Alain
Sehr nützlich!
Danke.
amin
Sie können auch „z-index: 999xxxx“ für das Logo oder jedes Element verwenden, das Sie in der Navigationsleiste platzieren möchten.
Sujith Reghu
Ich möchte wissen, wie man ein „Sticky“-Menü in einem WordPress-Beitrag oder einer Seite hinzufügt. Bei einem langen Beitrag sollen die Überschriften und Unterüberschriften des Beitrags selbst im „Sticky“-Menü angezeigt werden, damit ein Leser leicht von einem Abschnitt des Beitrags zu einem anderen navigieren kann. Danke...
Zac
Danke für das Tutorial!
Was ich brauche, ist etwas anders, ich brauche ein 'Mini-Menü', das erscheint, wenn man mit der Maus über das Menü fährt ... damit es nicht angezeigt wird, bis man mit der Maus darüber fährt ... wie ein Dropdown
Wenn Sie diese Anleitung erstellen könnten, würde ich mich freuen.
amin
Sie können ein Mega-Menü-Plugin oder ein Uber-Menü-Plugin verwenden, aber Sie können es auch ohne Plugin mit CSS oder jQuery machen, wie das Bootstrap3-Menü