Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man ein schwebendes Navigationsmenü in WordPress erstellt

Möchten Sie ein schwebendes Navigationsmenü in WordPress erstellen?

Das obere Navigationsmenü enthält in der Regel Links zu Ihren wichtigsten Seiten. Wenn Sie dieses Menü als „Sticky“-Menü einrichten, bleibt es auf dem Bildschirm, während der Benutzer auf der Seite nach unten scrollt, so dass es immer leicht zu erreichen ist.

In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise ein schwebendes Navigationsmenü zu Ihrer WordPress-Website hinzufügen können.

Creating a sticky floating navigation menu in WordPress

Was ist ein schwebendes Sticky-Navigation-Menü?

Ein Sticky- oder Floating-Navigationsmenü „klebt“ am oberen Rand des Bildschirms, wenn der Benutzer nach unten scrollt, so dass es immer auf dem Bildschirm zu sehen ist.

Normalerweise enthält das obere Navigationsmenü in WordPress Links zu den wichtigsten Inhalten Ihrer Website. Wenn Sie dieses Menü als „Sticky“-Menü kennzeichnen, können Besucher jederzeit auf diese Links klicken, ohne scrollen zu müssen.

A sticky navigation menu in action on our demo website

Wenn Sie einen Online-Shop betreiben, enthält das obere Navigationsmenü in der Regel Links zu Seiten, die auf Konversionen ausgelegt sind, z. B. die Kassenseite und den Kundenwagen. Wenn Sie das oberste Menü „klebrig“ machen, können Sie oft die Abbruchraten reduzieren und mehr Verkäufe erzielen.

Sehen wir uns also an, wie Sie ganz einfach ein schwebendes Navigationsmenü in jedem WordPress-Theme oder WooCommerce-Shop erstellen können. Verwenden Sie einfach die Quick-Links unten, um zu der Methode zu springen, die Sie verwenden möchten:

Methode 1: Hinzufügen eines Sticky-Menüs über die Theme-Einstellungen (einfach)

Einige der besten WordPress-Themes haben integrierte Unterstützung für Sticky-Navigation-Menüs. Daher lohnt es sich, die Einstellungen Ihres Themes zu überprüfen, indem Sie im WordPress-Dashboard auf Themes “ Anpassen gehen und nach Einstellungen mit der Bezeichnung „Menüs“ suchen.

Wenn Sie nicht sicher sind, ob Ihr Theme Sticky-Menüs unterstützt, können Sie in der Dokumentation des Themes nachsehen oder sogar den Entwickler um Hilfe bitten. Weitere Informationen finden Sie in unserem Leitfaden dazu, wie Sie richtig nach WordPress-Support fragen und ihn erhalten.

Wenn Ihr Theme keine integrierte Unterstützung für Sticky-Menüs bietet, müssen Sie eine der anderen Methoden anwenden.

Methode 2: Fügen Sie Ihr Sticky Navigation Menu mit einem Plugin hinzu (empfohlen)

Der einfachste Weg, ein Sticky-Navigation-Menü in WordPress hinzuzufügen, ist die Verwendung des Sticky Menu & Sticky Header Plugins. Damit können Sie alles, auch Menüs, als „sticky“ kennzeichnen.

Zunächst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Einstellungen “ Sticky Menu (oder irgendetwas!).

The Sticky Menu plugin's settings page

Zunächst müssen Sie die CSS-ID des Navigationsmenüs, das Sie „sticky“ machen wollen, mit dem Inspektionstool Ihres Browsers ermitteln.

Besuchen Sie einfach Ihre Website und fahren Sie mit der Maus über das Navigationsmenü. Klicken Sie dann mit der rechten Maustaste und wählen Sie im Menü des Browsers „Prüfen“.

Inspecting the navigation menu element on your website

Dadurch wird ein neues Fenster im Browser geöffnet, in dem Sie den Quellcode für das Navigationsmenü sehen können.

Sie müssen die Codezeile finden, die sich auf das Menü oder die Kopfzeile Ihrer Website bezieht. Sie wird etwa so aussehen:

<nav id="site-navigation" class="main-navigation" role="navigation">

Wenn Sie Schwierigkeiten haben, den Code zu finden, fahren Sie mit der Maus über die verschiedenen Codezeilen im Bereich „Inspektion“. Der Browser hebt das Navigationsmenü hervor, wenn Sie den richtigen Code gefunden haben, wie Sie im folgenden Bild sehen können.

Finding the navigation menu ID using the inspect tool

In diesem Fall lautet 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 dem Feld „Sticky Element (Required)“ hinzu.

Sie müssen auch ein Rautezeichen (#) am Anfang hinzufügen, so dass aus site-navigation #site-navigation wird.

Entering the ID of the element that you want to make sticky (in this case, the navigation menu)

Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“ unten auf der Seite, um Ihre Änderungen zu speichern.

Wenn Sie nun Ihre WordPress-Website besuchen und scrollen, sollte das Menü am oberen Rand bleiben.

Viewing the sticky menu on your website

Manchmal kann das Sticky-Menü Inhalte überlagern, die Sie nicht ausblenden möchten.

In diesem Fall müssen Sie einen Abstand zwischen dem oberen Rand Ihres Bildschirms und dem Sticky-Navigationsmenü festlegen, indem Sie eine Zahl in das Feld „Abstand zwischen dem oberen Rand der Seite und dem Sticky-Element“ eingeben.

How to create a sticky navigation menu in WordPress

Sticky-Menüs können bei Geräten mit kleineren Bildschirmen, wie z. B. mobilen Geräten, Probleme verursachen. Deshalb 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 „entkleben“, indem Sie das folgende Feld finden: „Element nicht kleben, wenn Bildschirm kleiner als…“.

Geben Sie hier „780px“ ein.

Unsticking the sticky navigation menu on mobile devices

Es gibt noch einige weitere Einstellungen, aber das ist alles, was Sie brauchen, um ein funktionierendes Sticky-Navigation-Menü zu erstellen.

Wenn Sie mit der Einrichtung des Navigationsmenüs zufrieden sind, klicken Sie auf „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Methode 3: Hinzufügen eines schwebenden Navigationsmenüs mit Code

Sie können auch ein Sticky-Navigation-Menü mit CSS erstellen.

Der beste Weg, um benutzerdefinierten Code zu WordPress hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste Code-Snippets-Plugin, mit dem Sie benutzerdefinierte 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. Außerdem können Sie Ihr Theme aktualisieren oder zu einem völlig anderen Theme wechseln, ohne Ihren benutzerdefinierten Code zu verlieren.

Sie können das Sticky-Menü auch mit einem einzigen Klick ein- und ausschalten.

Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, gehen Sie auf die Seite Code Snippets “ + Snippet hinzufügen, wo Sie alle fertigen WPCode-Snippets sehen, die Sie zu Ihrer Website hinzufügen können.

Dazu gehört ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Seiten mit Anhängen deaktivieren und vieles mehr.

Bewegen Sie den Mauszeiger über „Add Your Custom Code (New Snippet)“ und klicken Sie auf die Schaltfläche „Use snippet“, wenn sie erscheint.

Adding a custom code snippet to a website using WPCode

Auf dem nächsten Bildschirm müssen Sie einen Titel für das Codeschnipsel eingeben. Dieser dient nur als Referenz, Sie können also alles verwenden, was Sie wollen.

Öffnen Sie dann das Dropdown-Menü „Codetyp“ und wählen Sie „CSS Snippet“.

Creating a sticky navigation menu using WPCode

Fügen Sie anschließend den folgenden Codeausschnitt in den WPCode-Editor ein:

#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;
}

Damit wird ein Navigationsmenü mit schwarzem Hintergrund erstellt. Sie können jede beliebige Farbe verwenden, indem Sie den Hexadezimalcode neben dem Hintergrund ändern.

Wenn Sie zum Beispiel background: #ffffff erhalten Sie einen weißen Menühintergrund. Wenn Sie sich nicht sicher sind, welchen Hexadezimalcode Sie verwenden sollen, können Sie sich eine Ressource wie den HTML-Farbcode ansehen.

Außerdem müssen Sie #site-navigation durch die CSS-ID Ihres Navigationsmenüs ersetzen. Um diesen Code zu finden, folgen Sie einfach dem oben beschriebenen Verfahren.

Wenn Sie mit dem Code zufrieden sind, klicken Sie auf den Schalter „Inaktiv“, damit er sich in „Aktiv“ ändert, und klicken Sie dann auf die Schaltfläche „Snippet speichern“.

how to make a sticky navigation menu using WPCode

Wenn Sie nun Ihren WordPress-Blog oder Ihre Website besuchen, werden Sie das schwebende Navigationsmenü in Aktion sehen.

Je nach Theme kann es vorkommen, dass das Navigationsmenü unterhalb der Kopfzeile der Website erscheint, anstatt darüber. In diesem Fall könnte das Sticky-Navigationsmenü zu nahe am Seitentitel und der Kopfzeile erscheinen oder diese sogar überlappen.

The sticky navigation menu is slightly overlapping the site title

Wenn dies der Fall ist, können Sie Ihrem benutzerdefinierten CSS-Snippet Folgendes hinzufügen:

.site-branding {
margin-top:60px !important;
}

Ersetzen Sie einfach site-branding durch die CSS-Klasse Ihres Kopfbereichs. Um diese Informationen zu erhalten, verwenden Sie einfach das „Inspect“-Werkzeug Ihres Browsers und folgen Sie dann dem in Methode 2 beschriebenen Prozess.

Bonus: Machen Sie Ihre WordPress-Beiträge klebrig

Wenn Sie einen WordPress-Blog haben, ist es eine gute Idee, einige Ihrer Blog-Beiträge als „sticky“ zu kennzeichnen. Dabei kann es sich um Säulenartikel handeln, die die wichtigsten Inhalte Ihrer Website enthalten, oder um Ankündigungen und Werbegeschenke, mit denen Sie die Nutzer ansprechen möchten.

Wenn Sie einen Beitrag Ihrer Wahl als Sticky-Beitrag kennzeichnen, bleibt er oben auf Ihrer Blogseite, auch wenn Sie neue Inhalte veröffentlichen, die dann unterhalb des Sticky-Beitrags angezeigt werden.

Sticky post preview

Sie können Ihren Blogeintrag ganz einfach im Inhaltseditor als „sticky“ kennzeichnen. Erweitern Sie dann einfach die Registerkarte „Zusammenfassung“ im Blockbedienfeld und aktivieren Sie die Option „Am Anfang des Blogs anhaften“.

Klicken Sie anschließend oben auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern. Sie haben nun erfolgreich einen Sticky Blog Post auf Ihrer WordPress-Website erstellt.

Check the Sticky Post option

Weitere Einzelheiten finden Sie in unserem Tutorial über die Erstellung von Sticky Posts in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, ein schwebendes Navigationsmenü zu Ihrer WordPress-Website hinzuzufügen. Vielleicht interessieren Sie sich auch für unseren Leitfaden für Einsteiger, wie Sie Ihren Blog-Traffic erhöhen können, und unseren Vergleich der besten WordPress-Plugins für den Seitenaufbau.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

45 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    Thanks for the tutorial. I’ve always been looking for usually a template that can basically do this. According to this guide, I no longer have to.

    • WPBeginner Support

      Glad we could help open up your theme options :)

      Admin

  3. Paul

    Where do i leave the 5 Stars…..thank-you very much!!

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  4. Jess

    Thank you so so much for this helpful post!!! So clear and easy to follow.

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  5. Ivaylo

    Great practical tutorail. I did Method 2 and it worked instantly, however when I open the website on mobile, the buttons from the menu have vanished. Anyone knows why or how to solve it?

    Cheers!

    • WPBeginner Support

      If you haven’t done so already, we would recommend checking with the support for your specific theme to see if it could be a conflict with your theme’s CSS

      Admin

  6. Serena Richardson

    Hello,
    How do you create a sticky floating menu down the right hand side of a page rather than at the top, so it moves down as you scroll down.
    Thanks!
    Serena

  7. Tom Browne

    Worked instantly. Thank you

    • WPBeginner Support

      You’re welcome :)

      Admin

  8. simran

    level of perfection and the way of present the information …thanks you..

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  9. Theo

    Where do I find out the id of my navbar?
    Can’t find it.

  10. Natasha T

    A lifesaver, can’t thank you enough.

    • WPBeginner Support

      You’re welcome :)

      Admin

  11. 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

  12. alexandre

    Just what I was looking for! Great plugin.Thank’s

    • WPBeginner Support

      You’re welcome, glad you found our recommendation helpful :)

      Admin

  13. Guy Bailey

    Many thanks for your help – just a small q; the background of my menu is transparent when scrolling down. Any quick fixes of tricks to add a solid colour behind it (white in our case)?

  14. Manish

    Thank You. When Wpbeginner writes a blog post on a topic, it is bound to be helpful.

    • WPBeginner Support

      Glad our content has been helpful :)

      Admin

  15. Everest

    Thanks so much.
    You made my day.

    • WPBeginner Support

      You’re welcome, glad we could help :)

      Admin

  16. Tony Chung

    The CSS code worked and I did have to add a margin to the header so the whole title would display. My menu bar stretches across the top but the menu buttons start at the left and stop in the middle. How do I move the buttons to be centered on the page?

  17. Chinedu

    Wow, This works perfectly.

    Thank you

    • WPBeginner Support

      Glad our solution worked for you :)

      Admin

  18. 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?

  19. Raul

    How can i make this fixed navigation menu scrollable?
    So i used it for a sidebar but when the sidebar it is too long it doesn’t fit on the screen and i cant scroll it down.

  20. 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.

  21. Cesar

    Great post! your CSS code works for me :D

  22. dani

    :( I wasn’t even able to find that CSS code …. I even searched for „nav id“ and there is nothing like that in the code! Any idea why?

  23. amin

    Also you can „z-index: 999xxxx“ for logo or any element that you want put it on navbar

  24. Sujith Reghu

    I want to know how to add a sticky menu inside a WordPress post or page. Like for a long post, the headings and sub-headings of the post itself to be presented in the sticky menu so that a reader can easily navigate from one section in the post to another. Thanks…

  25. Zac

    thanks for the tutorial!

    what i need is a little different, i need a ‚mini-menu‘ to appear when you hover on the menu … so it doesn’t show until you hover .. like a drop down

    if you could make this tutorial i would appreciate it.

    • amin

      you can use a mega-menu plugin or uber menu plugin, but you can make it without plugin, by css or jquery, like bootstrap3 menu

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.