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.

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.

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!).

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.