ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So erstellen Sie ein schwebendes Navigationsmenü in WordPress
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
So deinstallieren Sie Apps in Windows 11
Wie man
Erste Eindrücke: Lenovo Yoga Pro 9i (2023) Test
Technische Bewertungen
Lenovo Yoga Pro 7i (2023) vs MacBook Air (2022): Was ist am besten?
Gegen
Das ultimative PS5-Bundle für Resident Evil-Fans ist gerade erschienen
Angebote
So koppeln Sie einen PS5 DualSense Edge Controller mit iPhone, iPad, Mac und Apple TV
Wie man
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > WordPress > Themes > So erstellen Sie ein schwebendes Navigationsmenü in WordPress
Themes

So erstellen Sie ein schwebendes Navigationsmenü in WordPress

Zuletzt aktualisiert: November 19, 2021 12:17 am
ThemeLocal vor 1 Jahr 7 Minuten Mindestlesezeit
Aktie
7 Minuten Mindestlesezeit
Aktie

Kürzlich hat uns einer unserer Benutzer gefragt, wie man ein Sticky-Navigationsmenü für seine Website erstellt.

Contents
Was ist ein Sticky Floating Navigation Menu?Methode 1: Fügen Sie Ihr Sticky Floating-Navigationsmenü mit einem Plugin hinzuMethode 2: Manuelles Hinzufügen eines schwebenden Navigationsmenüs

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:

Ein klebriges Navigationsmenü in Aktion auf unserer Demo-Website

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.

Die Einstellungsseite des Sticky Menu-Plugins

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.

Überprüfung des Navigationsmenüelements auf Ihrer Website

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:

Suchen der Navigationsmenü-ID mit dem Prüftool

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.

Eingabe der ID des Elements, das Sie kleben möchten (in diesem Fall das Navigationsmenü)

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:

Anzeigen des Sticky-Menüs auf Ihrer Website

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:

Die WordPress-Administrationsleiste erscheint über dem Sticky-Menü

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:

Das Sticky Menu Plugin bietet auch weitere Optionen

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.

Hinzufügen von benutzerdefiniertem CSS im WordPress-Theme

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:

Ein klebriges / schwebendes Navigationsmenü, das mit CSS erstellt wurde

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:

Das Sticky-Navigationsmenü überschneidet sich leicht mit dem Seitentitel

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:

Unter dem Sticky-Navigationsmenü ist jetzt Platz für den Titel

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.

Verwandter Beitrag

So deinstallieren Sie Apps in Windows 11

So koppeln Sie einen PS5 DualSense Edge Controller mit iPhone, iPad, Mac und Apple TV

So verschieben Sie eine Notiz in einen Ordner in der Notizen-App auf dem iPhone und iPad

Lenovo Yoga Pro 9i vs MacBook Pro (2023): Was sollten Sie wählen?

So legen Sie Erinnerungen auf Ihrem iPhone und iPad fest

MARKIERTE: ein, erstellen, Navigationsmenü, schwebendes, Sie, WordPress
ThemeLocal November 19, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So legen Sie die maximale Breite von oEmbed in WordPress fest (4 einfache Methoden)
Nächster Artikel So fügen Sie Ihrem WordPress-Theme ganz einfach Symbolschriften hinzu
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Bewertung der Princess Smart Infrarotheizung
Technische Bewertungen
Xiaomi Redmi Note 12 Pro Plus 5G vs. Samsung Galaxy A54 5G: Alle wichtigen Unterschiede
Gegen
Was tun, wenn das iPhone auf dem Apple-Logo hängen bleibt (2023)
Wie man
iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe
Wie man
Gerüchte darüber, dass Oppo und OnePlus den europäischen Markt verlassen, könnten halb wahr sein
Technische Bewertungen
Mit diesem PS5-Angebot erhalten Sie Hogwarts Legacy zum günstigen Preis
Angebote

También podría gustarte

Wie man

So deinstallieren Sie Apps in Windows 11

vor 3 Stunden 3 Minuten Mindestlesezeit
Wie man

So koppeln Sie einen PS5 DualSense Edge Controller mit iPhone, iPad, Mac und Apple TV

vor 4 Stunden 4 Minuten Mindestlesezeit
Wie man

So verschieben Sie eine Notiz in einen Ordner in der Notizen-App auf dem iPhone und iPad

vor 4 Stunden 3 Minuten Mindestlesezeit
Gegen

Lenovo Yoga Pro 9i vs MacBook Pro (2023): Was sollten Sie wählen?

vor 8 Stunden 9 Minuten Mindestlesezeit
Wie man

So legen Sie Erinnerungen auf Ihrem iPhone und iPad fest

vor 9 Stunden 5 Minuten Mindestlesezeit
Wie man

So erhalten Sie Apple Music Classical auf Ihrem iPhone

vor 12 Stunden 3 Minuten Mindestlesezeit
Angebote

Handeln Sie besser schnell, die Xbox Series S ist wieder auf 200 £ gesunken

vor 12 Stunden 3 Minuten Mindestlesezeit
Technische Bewertungen

Das Spotify-Redesign ist ein Chaos

vor 13 Stunden 6 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?