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.
Usually, the top navigation menu in WordPress contains links to your website’s most important content. By making this menu sticky, visitors can click on those links at any time without having to scroll.
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.
Das gesagt, sehen wir uns an, wie Sie ganz einfach ein klebendes schwebendes Navigationsmenü in jedem WordPress-Theme oder WooCommerce-Shop erstellen können. Verwenden Sie einfach die folgenden Schnelllinks, um zu der von Ihnen gewünschten Methode zu springen:
- Methode 1: Ein fixiertes Menü über die Theme-Einstellungen hinzufügen (Einfach)
- Methode 2: Fügen Sie Ihr Sticky-Navigationsmenü mit einem Plugin hinzu (empfohlen)
- Methode 3: Ein klebendes schwebendes Navigationsmenü mit Code hinzufügen
- Bonus: Machen Sie Ihre WordPress-Beiträge Sticky
Methode 1: Ein fixiertes Menü über die Theme-Einstellungen hinzufügen (Einfach)
Some of the best WordPress themes have built-in support for sticky navigation menus. With that being said, it’s worth checking your theme settings by going to Themes » Customize in the WordPress dashboard and looking for any settings labeled ‘Menus.’
Wenn Sie sich nicht sicher sind, ob Ihr Theme Sticky-Menüs unterstützt, können Sie die Dokumentation des Themes überprüfen oder sogar den Entwickler um Hilfe bitten. Weitere Informationen finden Sie in unserem Leitfaden zum Thema richtige WordPress-Unterstützung anfordern und 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 Sticky-Navigationsmenü in WordPress hinzuzufügen, ist die Verwendung des Plugins Sticky Menu & Sticky Header. Es ermöglicht Ihnen, alles sticky zu machen, einschließlich Menüs.
Zuerst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anfängeranleitung 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, das Sie zu einem Sticky-Menü machen möchten, mithilfe des Inspektionstools Ihres Browsers ermitteln.
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.
Feste 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
You can also create a sticky navigation menu using CSS.
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 unserer Schritt-für-Schritt-Anleitung zum Installieren 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.
These include a snippet that allows you to completely disable comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.
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 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-Farbcodes verwenden.
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 als „sticky“ zu markieren. Dies können die Kernartikel sein, die die wichtigsten Inhalte Ihrer Website enthalten, oder Ankündigungen und Gewinnspielbeiträge, mit denen Benutzer interagieren sollen.
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 Erstellen von festen Beiträgen in WordPress.
Wir hoffen, dieser Artikel hat Ihnen geholfen, ein festes schwebendes Navigationsmenü zu Ihrer WordPress-Site hinzuzufügen. Möglicherweise möchten Sie auch unseren Anfängerleitfaden lesen, wie Sie ein Schiebe-Panel-Menü in WordPress-Themes hinzufügen und unser Tutorial zum Hinzufügen von Social-Media-Icons zum WordPress-Menü.
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
Es würde davon abhängen, wie Ihr Menü eingerichtet ist, aber Sie können das Element inspizieren, 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 Inspektor-Element 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
I have a list of books in a table. I have imported the images of their front covers into Media, now I want to have the images pop up as a viewer scrolls down the list. Similar to a row hover, but how do I do this in a table created in table maker?
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
Hello,
How did you write the code LIKE A CODE in this post? I mean how to show HTML codes like this in a post?
Thanks.
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ü