ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    So fügen Sie ein Schema für mehrere Standorte für lokale Unternehmen in WordPress hinzu

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    So fügen Sie ein Schema für mehrere Standorte für lokale Unternehmen in WordPress hinzu

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
No Result
View All Result
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Home WordPress Themes

So erstellen Sie ein schwebendes Navigationsmenü in WordPress

7 Monaten ago
in Themes
Reading Time: 8 mins read
A A
0
Auf Facebook teilenAuf Twitter teilen

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

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.

Share26Tweet16Send
Previous Post

So legen Sie die maximale Breite von oEmbed in WordPress fest (4 einfache Methoden)

Next Post

So fügen Sie Ihrem WordPress-Theme ganz einfach Symbolschriften hinzu

Related Posts

Wie man

iOS 16: So ändern Sie die Uhr des Sperrbildschirms in arabisch-indisch

2 Stunden ago
Wie man

So entkoppeln Sie die Apple Watch vom iPhone (iOS 15 & watchOS 8 Update)

3 Stunden ago
Technik

Die Ikea AR App löscht dein abgenutztes Sofa, damit du sehen kannst, wie ein neues aussieht

6 Stunden ago
Load More
Next Post

So fügen Sie Ihrem WordPress-Theme ganz einfach Symbolschriften hinzu

Schreibe einen Kommentar Antworten abbrechen

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

EMPFOHLEN

So löschen Sie abgelaufene Abonnements auf dem iPhone

5 Monaten ago

Epson EcoTank ET-3850 im Test

3 Monaten ago

Apple Watch-Symbole und -Symbole: Meistere deine Apple Watch 7 oder frühere Modelle

6 Monaten ago

So gewinnen Sie jedes Mal Apple Watch-Wettbewerbe

4 Monaten ago
ThemeLocal – Blog-Tipps, die wie von Zauberhand funktionieren

Wir helfen klugen Unternehmern, ihre Blogs in profitable Geschäfte zu verwandeln. Wir sind ein preisgekrönter Blog, der seit 2020 Bloggern und Unternehmern hilft.

Folge uns

Neueste Nachrichten

Tim Cook gibt einen wichtigen Hinweis auf Apples AR-Zukunft

Juni 28, 2022

Energizer Recharge Power Plus AAA 700mAh im Test

Juni 28, 2022
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

© 2022 ThemeLocal. Tous droits réservés.

No Result
View All Result
  • Bloggen
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • E-Mail Marketing
  • Monetarisierung
  • SEO
  • Soziale Netzwerke
  • Tutorials
  • Bewertungen
  • Tipps
  • Sicherheit
  • Software und Dienste
  • Verkehrserzeugung
  • Anfängerleitfaden
  • Showcase

© 2022 ThemeLocal. Tous droits réservés.