Wie man WordPress-Navigationsmenüs gestaltet (aktualisiert)

Möchten Sie Ihre WordPress-Navigationsmenüs gestalten und ihre Farben oder ihr Aussehen ändern?

Während Ihr WordPress-Theme das Aussehen Ihrer Navigationsmenüs bestimmt, können Sie es mit CSS leicht an Ihre Anforderungen anpassen.

In diesem Artikel zeigen wir Ihnen, wie Sie die WordPress-Navigationsmenüs auf Ihrer Website gestalten können.

Wir zeigen Ihnen zwei verschiedene Methoden. Die erste Methode eignet sich am besten für Anfänger, da sie ein Plugin verwendet und keine Programmierkenntnisse erfordert. Die zweite Methode ist für fortgeschrittene Heimwerker geeignet, die lieber CSS-Code als ein Plugin verwenden.

Danach zeigen wir Ihnen einige Beispiele, wie Sie das Design Ihres Navigationsmenüs anpassen können.

Sie können die nachstehenden Links verwenden, um schnell durch den Artikel zu navigieren:

Methode 1: Gestalten von WordPress-Navigationsmenüs mit einem Plugin

Ihr WordPress-Theme verwendet CSS, um Navigationsmenüs zu gestalten. Viele Anfänger sind mit der Bearbeitung von Themedateien oder dem Schreiben von CSS-Code allein nicht vertraut.

Da kommt ein WordPress-Styling-Plugin gerade recht, denn es erspart Ihnen die Bearbeitung von Themadateien und das Schreiben von Code.

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

CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme entwerfen können, ohne auch nur eine einzige Zeile Code schreiben zu müssen, ohne dass HTML oder CSS erforderlich sind.

Benutzer können diesen CSS Hero Coupon verwenden, um einen Rabatt von 34% auf ihren Einkauf zu erhalten.

Nach der Aktivierung werden Sie weitergeleitet, um Ihren CSS Hero-Lizenzschlüssel zu erhalten. Folgen Sie einfach den Anweisungen auf dem Bildschirm, und Sie werden mit wenigen Klicks zu Ihrer Website zurückgeleitet.

Als Nächstes müssen Sie in der Symbolleiste der WordPress-Verwaltung auf die Schaltfläche "Anpassen mit CSS Hero" klicken.

CSS Hero bietet einen WYSIWYG-Editor (what you see is what you get). Wenn Sie auf die Schaltfläche klicken, gelangen Sie zu Ihrer Website, auf der das CSS Hero-Fenster auf der linken Seite des Bildschirms sichtbar ist.

Um mit der Bearbeitung zu beginnen, klicken Sie einfach auf das Element, das Sie ändern möchten.

Wenn Sie mit der Maus über Ihr Navigationsmenü fahren, hebt CSS Hero es hervor, indem er die Ränder um das Menü herum anzeigt. Wenn Sie auf das hervorgehobene Navigationsmenü klicken, werden Ihnen die Elemente angezeigt, die Sie bearbeiten können.

Im obigen Screenshot sehen Sie den Container für das Hauptnavigationsmenü. Mit CSS Hero können Sie den Hintergrund, die Typografie, Rahmen, Abstände, Listen und Extras bearbeiten.

Sie können auf jede beliebige Eigenschaft klicken, die Sie ändern möchten. Nehmen wir an, wir möchten die Hintergrundfarbe unseres Navigationsmenüs ändern. Sobald Sie auf die Eigenschaft "Hintergrund" klicken, zeigt CSS Hero Ihnen eine einfache Schnittstelle an, auf der Sie Ihre Änderungen vornehmen können.

Hier können Sie die Hintergrundfarbe, den Farbverlauf, das Bild usw. auswählen. Wenn Sie Änderungen vornehmen, können Sie diese live in der Themenvorschau sehen.

Wenn Sie mit den Änderungen zufrieden sind, vergessen Sie nicht, auf die Schaltfläche "Speichern & Veröffentlichen" zu klicken, um Ihre Änderungen zu speichern.

Das Beste an dieser Methode ist, dass Sie alle Änderungen leicht rückgängig machen können. CSS Hero speichert einen vollständigen Verlauf all Ihrer Änderungen, und Sie können zwischen diesen Änderungen hin und her wechseln.

Methode 2: Manuelles Gestalten von WordPress-Navigationsmenüs

Diese Methode erfordert das manuelle Hinzufügen von benutzerdefiniertem CSS und ist für fortgeschrittene Benutzer gedacht. Weitere Informationen finden Sie in unserer Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.

WordPress-Navigationsmenüs werden in einer ungeordneten Liste angezeigt. Wenn Sie das Standard-WordPress-Menü-Tag verwenden, wird eine Liste angezeigt, der keine CSS-Klassen zugeordnet sind.

Die unsortierte Liste hat den Klassennamen Menü wobei jedes Listenelement seine eigene CSS-Klasse hat.

Dies könnte funktionieren, wenn Sie nur eine Menüposition haben. Die meisten Themes haben jedoch mehrere Positionen, an denen Sie Navigationsmenüs anzeigen können. Wenn Sie nur die Standard-CSS-Klasse verwenden, kann es zu Konflikten mit Menüs an anderen Positionen kommen.

Aus diesem Grund müssen Sie auch eine CSS-Klasse und die Position des Menüs definieren. Die Chancen stehen gut, dass Ihr WordPress-Theme dies bereits tut, indem es die Navigationsmenüs mit einem Code wie diesem hinzufügt:

 'primary', 'menu_class' => 'primary-menu', ) ); ?> 

Dieser Code teilt WordPress mit, dass das Theme an dieser Stelle das Hauptmenü anzeigt und fügt außerdem eine CSS-Klasse primäres-menü zum Navigationsmenü.

Jetzt können Sie Ihr Navigationsmenü mit dieser CSS-Struktur gestalten.

 // Containerklasse #header .primary-menu{} // Containerklasse erste ungeordnete Liste #header .primary-menu ul {} // ungeordnete Liste innerhalb einer ungeordneten Liste #header .primary-menu ul ul {} // jedes Navigationselement #header .primary-menu li {} // jedes Navigationselement Anker #header .primary-menu li a {} // ungeordnete Liste, wenn es Dropdown-Elemente gibt #header .primary-menu li ul {} // jedes DropdownNavigationselement #header .primary-menu li li {} // jedes nach unten gezogene Navigationselement Anker #header .primary-menu li a {} 

Sie müssen Folgendes ersetzen #Kopfzeile mit der von Ihrem Navigationsmenü verwendeten Container-CSS-Klasse.

Mit dieser Struktur können Sie das Erscheinungsbild Ihres Navigationsmenüs komplett verändern.

Es gibt jedoch noch weitere von WordPress generierte CSS-Klassen, die automatisch zu jedem Menü und Menüpunkt hinzugefügt werden. Diese Klassen ermöglichen es Ihnen, Ihr Navigationsmenü weiter anzupassen.

 // Klasse für aktuelle Seite .current_page_item{} // Klasse für aktuelle Kategorie .current-cat{} // Klasse für beliebige andere aktuelle Menüpunkte .current-menu-item{} // Klasse für eine Kategorie .menu-item-type-taxonomy{} // Klasse für Beitragstypen .menu-item-type-post_type{} // Klasse für beliebige benutzerdefinierte Links .menu-item-type-custom{} // Klasse für den Home-Link .menu-item-home{} 

WordPress erlaubt es Ihnen auch, Ihre eigenen CSS-Klassen zu einzelnen Menüpunkten hinzuzufügen. Sie können diese Funktion nutzen, um Menüpunkte zu gestalten, z. B. durch Hinzufügen von Bildsymbolen zu Ihren Menüs oder durch einfache Farbänderungen, um einen Menüpunkt hervorzuheben.

Gehen Sie rüber zu Erscheinungsbild " Menüs Seite in Ihrem WordPress-Admin und klicken Sie auf die Schaltfläche Bildschirmoptionen.

Sobald Sie dieses Kästchen angekreuzt haben, wird ein zusätzliches Feld hinzugefügt, wenn Sie jeden einzelnen Menüpunkt bearbeiten wollen.

Nun können Sie diese CSS-Klasse in Ihrem Stylesheet verwenden, um Ihr benutzerdefiniertes CSS hinzuzufügen, das sich nur auf den Menüpunkt mit der hinzugefügten CSS-Klasse auswirkt.

Beispiele für die Gestaltung von Navigationsmenüs in WordPress

Da verschiedene WordPress-Themes unterschiedliche Styling-Optionen, CSS-Klassen und sogar JavaScript zur Erstellung von Navigationsmenüs verwenden, haben Sie viele Möglichkeiten, diese Stile zu ändern und Ihre Navigationsmenüs an Ihre eigenen Anforderungen anzupassen.

Das Inspektionstool in Ihrem Webbrowser ist Ihr bester Freund, wenn es darum geht, herauszufinden, welche CSS-Klassen geändert werden müssen. Wenn Sie es noch nicht verwendet haben, werfen Sie einen Blick auf unsere Anleitung zur Verwendung des Inspektionstools für die Anpassung von WordPress-Themes.

Zeigen Sie einfach mit dem Mauszeiger auf das Element, das Sie ändern möchten, klicken Sie mit der rechten Maustaste und wählen Sie dann im Menü des Browsers die Option "Inspizieren".

Beachten Sie, dass bei diesem Thema "primary-menu-list" die CSS-ID des Navigationsmenüs ist und "menu-wrapper" seine CSS-Klasse.

Werfen wir also einen Blick auf einige Beispiele aus der Praxis für die Gestaltung von Navigationsmenüs in WordPress.

1. die Schriftfarbe in WordPress-Navigationsmenüs ändern

Hier ist ein Beispiel für ein benutzerdefiniertes CSS, das Sie zu Ihrem Thema hinzufügen können, um die Schriftfarbe der Navigationsmenüs zu ändern.

 #primary-menu-list li.menu-item a { color:#ff0000; } 

In diesem Beispiel ist die #primäres-menu-liste ist die ID, die der ungeordneten Liste zugewiesen ist, die unser Navigationsmenü anzeigt. Sie müssen das Inspektionstool verwenden, um die von Ihrem Thema verwendete ID herauszufinden.

2. die Hintergrundfarbe der Navigationsmenüleiste ändern

Zunächst müssen Sie die CSS-ID oder Klasse herausfinden, die Ihr Thema für den Container verwendet, der das Navigationsmenü umgibt.

Danach können Sie das folgende benutzerdefinierte CSS verwenden, um die Hintergrundfarbe der Navigationsmenüleiste zu ändern.

 .menu-wrapper { background-color:#bdd1cd; } 

Hier sehen Sie, wie es auf unserer Demo-Website aussieht.

3. die Hintergrundfarbe eines einzelnen Menüpunkts ändern

Vielleicht haben Sie schon bemerkt, dass viele Websites eine andere Hintergrundfarbe für die wichtigsten Links in ihrem Navigationsmenü verwenden. Bei diesen Links kann es sich um eine Schaltfläche für die Anmeldung, die Registrierung, den Kontakt oder den Kauf handeln. Durch die Verwendung einer anderen Farbe wird der Link besser wahrgenommen.

Um dies zu erreichen, fügen wir eine benutzerdefinierte CSS-Klasse zu dem Menüelement hinzu, das wir mit einer anderen Hintergrundfarbe hervorheben möchten.

Gehen Sie rüber zu Erscheinungsbild " Menüs und klicken Sie auf die Schaltfläche "Bildschirmoptionen" in der oberen rechten Ecke des Bildschirms. Daraufhin wird ein Dropdown-Menü angezeigt, in dem Sie das Kontrollkästchen neben der Option "CSS-Klassen" aktivieren müssen.

Danach müssen Sie zu dem Menüpunkt scrollen, den Sie ändern möchten, und auf ihn klicken, um ihn zu erweitern. Sie werden eine neue Option zum Hinzufügen Ihrer benutzerdefinierten CSS-Klasse sehen.

Sobald Sie das Menü gespeichert haben, können Sie diese CSS-Klasse verwenden, um das betreffende Menüelement anders zu gestalten.

 .contact-us { background-color: #ff0099; border-radius:5px; } 

So sieht es auf unserer Testseite aus.

4. den WordPress-Navigationsmenüs Hover-Effekte hinzufügen

Wenn Sie möchten, dass Ihre Menüpunkte beim Überfahren mit der Maus die Farbe wechseln, können Sie mit diesem CSS-Trick Ihre Navigationsmenüs interaktiver gestalten.

Fügen Sie einfach das folgende benutzerdefinierte CSS zu Ihrem Thema hinzu.

 #primary-menu-list li.menu-item a:hover { background-color:#a6e4a5; color:#666; border-radius:5px; } 

In diesem Beispiel, #primäres-menu-liste ist die CSS-ID, die von Ihrem Thema für die ungeordnete Navigationsmenüliste verwendet wird.

So sieht das auf unserer Testseite aus.

5. schwebende Sticky-Navigationsmenüs in WordPress erstellen

Normalerweise erscheinen Navigationsmenüs oben und verschwinden, wenn der Benutzer nach unten scrollt. Sticky Floating Navigationsmenüs bleiben oben, wenn der Benutzer nach unten scrollt.

Sie können den folgenden CSS-Code in Ihr Theme einfügen, um Ihre Navigationsmenüs sticky zu machen.

 #primary-menu-list { background:#2194af; 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: right; padding-left:10px } 

Einfach ersetzen #primäres-menu-liste mit der CSS-ID Ihres Navigationsmenüs.

Hier sehen Sie, wie es in unserer Demo aussieht.

Ausführlichere Anweisungen und eine alternative Methode finden Sie in unserer Anleitung zum Erstellen eines schwebenden Navigationsmenüs in WordPress.

6. transparente Navigationsmenüs in WordPress erstellen

Viele Websites verwenden große oder bildschirmfüllende Hintergrundbilder mit ihren Call-to-Action-Schaltflächen. Wenn Sie transparente Menüs verwenden, verschmilzt Ihre Navigation mit dem Bild, so dass die Nutzer sich eher auf Ihren Call-to-Action konzentrieren.

Fügen Sie einfach das folgende CSS-Beispiel zu Ihrem Thema hinzu, um Ihre Navigationsmenüs transparent zu machen.

 #site-navigation { background-color:transparent; } 

So sieht es auf unserer Demo-Website aus.

Je nach Thema müssen Sie möglicherweise die Position des Kopfzeilenbildes so anpassen, dass es den Bereich hinter den transparenten Menüs abdeckt.

7. die ersten und letzten Menüpunkte gestalten

Sie können dem ersten und letzten Element Ihres WordPress-Navigationsmenüs ein benutzerdefiniertes Styling hinzufügen, indem Sie eine .first- und .last-Klasse hinzufügen. Dadurch wird sichergestellt, dass die richtigen Elemente gestylt werden, auch wenn die Elemente in Ihrem Menü neu angeordnet werden.

Sie müssen den folgenden Codeschnipsel in die Datei functions.php Ihres Themes einfügen:

 function wpb_first_and_last_menu_class($items) { $items[1]->classes[] = 'first'; $items[count($items)]->classes[] = 'last'; return $items; } add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Dadurch werden die CSS-Klassen .first und .last für den ersten bzw. letzten Navigationsmenüpunkt erstellt, die Sie zur Gestaltung der Menüpunkte verwenden können.

Sie können zum Beispiel diese CSS-Formatierung in das Stylesheet style.css Ihres Themas einfügen, um die ersten und letzten Menüpunkte fett darzustellen.

 .first a {font-weight: bold;} .last a {font-weight: bold;} 

So sieht es auf unserer Demo-Website aus.

Weitere Informationen und wie Sie denselben Effekt mit CSS-Selektoren erzielen können, finden Sie in unserer Anleitung zum Hinzufügen der ersten und letzten CSS-Klasse zu WordPress-Menüelementen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man WordPress-Navigationsmenüs gestaltet. Vielleicht möchten Sie auch lernen, wie man ein mobilfähiges responsives WordPress-Menü hinzufügt, oder unsere Liste mit Tipps zur Beschleunigung der WordPress-Leistung lesen.

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.