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 werden Ihnen zwei verschiedene Methoden zeigen. Die erste Methode ist am besten für Anfänger geeignet, da sie ein Plugin verwendet und keine Programmierkenntnisse erfordert. Die zweite Methode ist für fortgeschrittene Heimwerker, 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
- Methode 2: Manuelles Gestalten von WordPress-Navigationsmenüs
- Ändern der Schriftfarbe in WordPress-Navigationsmenüs
- Hintergrundfarbe der Navigationsmenüleiste ändern
- Ändern der Hintergrundfarbe eines einzelnen Menüpunkts
- Hinzufügen von Hover-Effekten zu WordPress-Navigationsmenüs
- Sticky Floating Navigationsmenüs in WordPress erstellen
- Erstellen von transparenten Navigationsmenüs in WordPress
- Den ersten und letzten Menüpunkt gestalten
Methode 1: Gestalten von WordPress-Navigationsmenüs mit einem Plugin
Ihr WordPress-Theme verwendet CSS, um Navigationsmenüs zu gestalten. Vielen Anfängern fällt es schwer, Theme-Dateien zu bearbeiten oder CSS-Code selbst zu schreiben.
Da kommt ein WordPress-Styling-Plugin gerade recht. Es erspart Ihnen die Bearbeitung von Theme-Dateien oder 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 für die Installation eines WordPress-Plugins.
CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme entwerfen können, ohne eine einzige Zeile Code schreiben zu müssen, ohne HTML oder CSS. Lesen Sie unseren CSS Hero Test, um mehr zu erfahren.
WPBeginner-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 zu sehen ist.
Um mit der Bearbeitung zu beginnen, klicken Sie einfach auf das Element, das Sie ändern möchten.
Bewegen Sie die Maus über Ihr Navigationsmenü, und CSS Hero hebt es hervor, indem er die Ränder um es herum anzeigt. Wenn Sie auf das hervorgehobene Navigationsmenü klicken, zeigt es Ihnen die Elemente, die Sie bearbeiten können.
Im obigen Screenshot sehen Sie den primären Navigationsmenü-Container. Mit CSS Hero können Sie den Hintergrund, die Typografie, Rahmen, Abstände, Listen und Extras bearbeiten.
Sie können auf jede 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 und mehr 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 und veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.
Das Beste an dieser Methode ist, dass Sie alle Änderungen, die Sie vornehmen, problemlos 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 (mit Aufzählungszeichen) angezeigt. Wenn Sie das Standard-WordPress-Menü-Tag verwenden, wird eine Liste angezeigt, der keine CSS-Klassen zugeordnet sind.
<?php wp_nav_menu(); ?>
Die unsortierte Liste erhält den Klassennamen menu, wobei jedes Listenelement seine eigene CSS-Klasse hat.
Dies könnte funktionieren, wenn Sie nur eine Menüposition haben. Die meisten Themen haben jedoch mehrere Stellen, an denen Sie Navigationsmenüs anzeigen können. Wenn Sie nur die Standard-CSS-Klasse verwenden, kann es zu einem Konflikt mit Menüs an anderen Stellen kommen.
Aus diesem Grund müssen Sie auch eine CSS-Klasse und die Position des Menüs festlegen. Die Chancen stehen gut, dass Ihr WordPress-Theme dies bereits tut, indem es die Navigationsmenüs mit einem Code wie diesem hinzufügt:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
Dieser Code teilt WordPress mit, dass das Thema hier das Hauptmenü anzeigt. Außerdem fügt er dem Navigationsmenü die CSS-Klasse primary-menu hinzu.
Jetzt können Sie Ihr Navigationsmenü mit dieser CSS-Struktur gestalten.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Sie müssen #header durch die von Ihrem Navigationsmenü verwendete Container-CSS-Klasse ersetzen.
Mit dieser Struktur können Sie das Erscheinungsbild Ihres Navigationsmenüs vollständig verändern.
Es gibt jedoch noch weitere von WordPress generierte CSS-Klassen, die automatisch zu jedem Menü und Menüpunkt hinzugefügt werden. Mit diesen Klassen können Sie Ihr Navigationsmenü weiter anpassen.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a Category
.menu-item-type-taxonomy{}
// Class for Post types
.menu-item-type-post_type{}
// Class for any custom links
.menu-item-type-custom{}
// Class for the home Link
.menu-item-home{}
Mit WordPress können Sie auch eigene CSS-Klassen zu einzelnen Menüpunkten hinzufügen. Sie können diese Funktion verwenden, um Menüelemente zu gestalten, z. B. durch Hinzufügen von Bildsymbolen zu Ihren Menüs oder durch einfache Farbänderungen, um ein Menüelement hervorzuheben.
Gehen Sie in Ihrem WordPress-Admin auf die Seite Erscheinungsbild “ Menüs 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 eigenes CSS hinzuzufügen. Sie wirkt sich nur auf das Menüelement mit der von Ihnen hinzugefügten CSS-Klasse aus.
Beispiele für die Gestaltung von Navigationsmenüs in WordPress
Verschiedene WordPress-Themes können unterschiedliche Styling-Optionen, CSS-Klassen und sogar JavaScript zur Erstellung von Navigationsmenüs verwenden. Dadurch 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 Sie ändern 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. 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 #primary-menu-list die ID, die der ungeordneten Liste zugeordnet ist, die unser Navigationsmenü anzeigt. Sie müssen das Inspektionstool verwenden, um die von Ihrem Thema verwendete ID herauszufinden.
2. 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. Hintergrundfarbe eines einzelnen Menüpunkts ändern
Vielleicht ist Ihnen schon aufgefallen, dass viele Websites eine andere Hintergrundfarbe für die wichtigsten Links in ihrem Navigationsmenü verwenden. Bei diesem Link kann es sich um einen Login-, Anmelde-, Kontakt- oder Kauf-Button handeln. Durch eine andere 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 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 Kä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 bemerken.
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. Hover-Effekte zu WordPress-Navigationsmenüs hinzufügen
Möchten Sie, dass Ihre Menüpunkte bei Mouseover die Farbe wechseln? Dieser besondere CSS-Trick lässt Ihre Navigationsmenüs interaktiver aussehen.
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 ist #primary-menu-list die CSS-ID, die von Ihrem Thema für die ungeordnete Navigationsmenüliste verwendet wird.
So sieht das auf unserer Testseite aus.
5. Sticky Floating Navigation Menus 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
}
Ersetzen Sie einfach #primary-menu-list durch die 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. Dadurch konzentrieren sich die Nutzer eher auf Ihre Aufforderung zum Handeln.
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. Gestalten Sie den ersten und letzten Menüpunkt
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 Ihre ersten bzw. letzten Navigationsmenüpunkte erstellt. Sie können diese Klassen verwenden, um die Menüpunkte zu gestalten.
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 erfahren , wie Sie ein mobilfähiges, responsives WordPress-Menü hinzufügen können, 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.
Syed Balkhi says
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!
Sydney Peason says
The „Menu“ option has disappeared under my „Appearance“ menu option > is there another way to see the container CSS of my menu and options?
Thanks!
WPBeginner Support says
IF you’re using a block theme that does not have the appearance menu then you can use Inspect element to see the CSS container information. You can see our guide below on using Inspect Element:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Kristyna says
Hello, I need advice, please:
I have successfully added CSS to make one of my menu items different in color. However, when I scroll down, my fixed navigation primary menu comes down with me, and the changed color of that one item changes back to its original – How do I keep the new color of that one item even when scrolling down?
Thanks!
WPBeginner Support says
Your theme may modify the menu when you are scrolling down. If you use inspect element you should be able to select the menu item while scrolled down to add your CSS. We have a guide on using inspect element you can take a look at below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Venkat Vavilala says
Hi,
I want to increase menu font size. How can I do this?
If it is default, then how can I customize?
Please show me easy method to increase the menu font size
WPBeginner Support says
It would depend on which method from this article you plan on using. As an example, if you use the CSS method then you would use inspect element the same as under method 2’s examples and modify the font-size
Admin
Budi Santoso says
Hello Admin.
How the Orange ribbon navigation menu in this site was made?
Thanks
WPBeginner Support says
To understand that you would want to take a look at our guide on using inspect element here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
maria says
how did you make the menu for this site
did you have to edit the theme files ?
thanks
WPBeginner Support says
Our theme was one we custom created
Admin
Trish says
I am wanting to create a menu on the shop page of my woo commerce site, horizontally, that has all the categories of product that is sold. How can I do that, please? Thank you all for your help in advance.
WPBeginner Support says
If your theme has a menu in that location you could set up a normal menu using:
https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/
Then, you can use conditional logic to only have it appear on your shop page using our article here: https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/
Admin
Kushal Sonwane says
Though it was a great task to do, but after reading this article, it is very simple to customise navigation menus.
Thanks.
WPBeginner Support says
You’re welcome
Admin
Lisa says
I am very new to doing this and I am creating a site in WP using the theme Oceanwp. I have done as you have suggested by clicking on CCS from the menu. I am trying to remove the arrow on my drop down menu and nothing I try works at removing it.
Thanking you in advance for any help.
WPBeginner Support says
Hi Lisa,
You may want to reach out to theme authors, they would be able to help you with that.
Admin
Anirudhya says
sir which theme you are using. iam starting a wordpress blog,i want a simple layout blog for my educational purpose.
WPBeginner Support says
Hi Anirudhya,
We are using a custom theme made specifically for WPBeginner.
Admin
Bobby says
Hi, how about with HTML code?
I want to add a header to the neseted menus. But I don’t kow where or how to put it.
Daniela says
Hi,
I Would like to change the appearance of only the menu I have added for my salespage. I would like to change the height and add a logo.
I am not a pro and I have tried some things to see if anything changes in the menu, but it doesn’t. This is what I have tried:
#Salespage-menu {
background:#2194af;
height:40px;
}
Can you please help me on my way?
Thank you so much for your effort!
Eugene says
Hi Guys,
I have an issue with my nav menu that I really would be glad of some help with pleas… The primary menu itself is perfect looking, the problem is with the submenu which drops down with a large gap approx 100px or so in size between it and the parent above.
When I try to navigate onto the submenu it simply disappears from view.
I have tried everything I can think of so far to move it directly up under the parent menu so that it will remain open and clickable but I have failed so far.
This is the Custom CSS being used for the Point Theme:
#logo {
margin: 0;
}
.site-branding {
padding: 0;
}
.post-info {
display: none;
}
#navigation ul li a {
min-height: 22px;
padding: 5px 10px 5px 10px;
}
.post-date {
display: none;
}
Thanks and Regards.
WPBeginner Support says
Hi Eugene,
We are not sure what may be causing this issue. It depends on your theme’s CSS and layout and which classes they have used. You can try this custom CSS:
.primary-navigation li ul { margin:0px; padding:0px; }1-click Use in WordPress
Admin
Eugene says
I’m sorry to say, that didn’t work either…
Thanks for trying, it seems there’s a new theme called for.
Regards.
Amirul Farhan says
Hello.
Is the plugin works even though with the theme purchased have its own menu design?
Thanks
Rida says
if you want to use bootstrap you simply add the css classes of your own with simple one line code on your header.php
‚primary‘, ‚container‘ => ‚div‘, ‚container_class‘ => ‚collapse navbar-collapse‘, ‚menu_class‘ => ’nav navbar-nav pull-right‘, ‚menu_id‘ => ‚primary-menu‘ ) ); ?>
Dhany says
Yeay..another PLUGIN you guys share how to use PLUGIN sooo much, not exactly use wordpress…great job
WPBeginner Support says
Hi Dhany,
Thanks for the feedback. At WPBeginner, our target audience is mostly beginner level users. Most of them are not familiar with CSS, HTML, PHP, etc. Plugins make it easier for them to get things done without breaking their websites.
Admin
Andrew says
Dude…it says ‚beginner‘ in the URL.
Plus…they laid out a manual option halfway through.
Malin says
Hi! I desperately need help with my menu on the site using Baskerville theme. With the latest update the menu has gone completely bananas! Please HELP!
Malin
Raymond says
This helped me a lot when I was trying to figure out how to get my styles from a bootstrap theme to work in WordPress. Thank you
Samseen says
Nice Post here,
However, how can one target a particular item in the list. I actually did a work-around at this time, but I will want to target that particular menu item.
Say for example, I want to have a different background color for the menu of that particular item. How can this be done?
Marko says
Inspect element tool in Chrome, Firefox.
benjamin says
Hello guys am new in coding, please I need real help here I have a WordPress site and my site theme is Baskerville , this theme support only one menu am trying to create navigational menus to my curious pages, please if there is code for doing that please where can I place it ,please I’ll so much appreciate a reply thank you.
Arsh Dznr says
i m ussing my css menu in wordpress but menus dropdown not showing pls help me
thanxxxxxxxx
umanga says
did you add your scripts into function.php properly ?
Andika Amri says
Hello wpbeginner, nice tuts!
I am using vantage theme, already put custom class in one of my menu = „.menu-about“, but when i’m styling it stylesheet.css, its not applicable at all, do you have any suggestion at all?
thanks!
shaon says
I am using twenty Twelve theme. Already made changes to my menu with different colors. But i cant move the navigation menu position on the header, it got too much space at bottom from the baseline of the header . I want it touching the bottom of the header.
Niveditha says
Hi,
I have created a main menu in header and a footer menu using the wordpress codex. Now my two menus sit vertically on my page. How to code them for horizontal menus?
Please help out, this is real urgent!
TIA
WPBeginner Support says
For that you need to use CSS. Study the code in the default themes, the best example would be twenty thirteen or twenty twelve themes.
Admin
Judy says
I would kill for an infographic for what all those classes actually modify. Like:
.current-page-ancestor
.current-menu-parent
.current_menu_parent
.current-page-parent
.current_page_parent
.current-menu-ancestor
and what the difference is between the dashes/underscores like in .current-menu-parent vs .current_menu_parent
i will make one for you if you explain it to me!
thank you…
Tarmizi Achmad says
thx about information…
Yogesh Kumar says
hey i want to ask a very important thing
Like the bar shown on your website’s nav bar above for the link Blog shows 8 links as we move our cursor on that …now my site’s are also showing in the same style but i want them to be displayed in such a manner that when i will move my cursor over it will show the 8 links side by side means 4-4……Please sir i am in a great need of this …please reply to this asap…
Editorial Staff says
Usually menus are organized in unordered lists ul. When you have sub navigation or dropdowns, then are its own unordered list inside a list element. So an example CSS class that you would be modifying would be like:
ul.menu li ul{width: 220px;}
ul.menu li li{float: left; width: 100px;}
Now this would set each second level list item to have an exact width and float left.
Admin
Jim says
Great article, thanks.
I never new about that CSS class feature, at least I know now.
Its really going to benefit me.
Thanks.
Nilamkumar Patel says
This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post
wiseroner says
great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you!
wpbeginner says
@wiseroner You cant just add the font-size in the main menu class in your css file.
wpbeginner says
@mriulian Look in the tutorial above… the classes for current pages are already defined…
In the header code, you need to define the menu container ID and container class… follow the article as it says, and it will work.
mriulian says
Just trying to be more clear, this is my code:
// in the function page
if (function_exists(‚register_nav_menus‘)) { register_nav_menus( array( ‚mainNav‘ ) ); }
// in the header page
‚main_nav_menu‘)); ?>
// in the css file
.current{ background-color: #0188AA; color: #fff; text-decoration: none; }
How do I apply this class to my navigation? ( very easy in a static html page but apparently pretty complicated in wordpress).
Thanks in advance
mriulian says
This is what I did but it doesn t work. I registered my menu in the
functions page and then I called it from the header page as my main
navigation. Now, I have a . current class in my stylesheet to be applied
to the current page but it is not obvious how to do that.
Can you help with a suggestion?
wpbeginner says
The way WordPress navigation menus work, it will automatically know which page is the current one..
iirimina says
Thank you for mentioning about the css classes in the screen options panel. The problem that I have with my navigation is how to style the nav menu so that each menu item gets a specific background color when you arrive at a certain page. You mention creating a class such as .current_page_item{} in your style sheet. But how to apply this class in the header.php?
Rick says
Where can I get further more detailed info on how to add the icons to the menu names. Whats a real good css guide for doing alot of these things you outlined here?
Thanks
Editorial Staff says
CSS-Tricks is a good forum, but you should probably look at CSS for Beginner books to learn CSS. Because all you are doing is adding a background image.
Admin
Francisco says
Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
Any thoughts on that would be greatly appreciated,
Editorial Staff says
Yes, you would utilize Menu Class parameter for that.
Admin
Francisco says
That’s what I was thinking. Thanks for confirming, and for getting back to me.
Cheers!
Jayesh says
nice article.
I want to change out put of wp_nav_menu().
I do not like HTML generated by wp_nav_menu().
I have my own nice HTML for Menu I want.
so I wanted to modify HTML structure generated by wp_nav_menu().
is this possible ?
Kindly advise asap.
Editorial Staff says
You can add your own divs etc, but it will always be the list output. You can style it to be however you want.
Admin
chunky says
Thank you! Now I can stop pulling my hair out! Bookmarked this and will tell others!
Kalid says
hi, thank for the tutorial. it would be nice if you guide me to have the nav menu used in your theme. Id like to have a drop-down menu like yours. tnks!
Editorial Staff says
The WordPress default navigation menu lets you have drop down menus. Just drag them a little to the right of the main item, and it is possible. If you use a framework like Genesis, it already has Fancy Drop down option available, so you can simply select that. Or you can utilize jQuery techniques like SuperFish to do this. We may add a tutorial in the future.
Admin
tuba says
very nice article, helped me for my wordpress project, thanks!
GrimCris says
Great article. I didn’t know about the CSS classes in WordPress Menus. Thank you so much!
Keith Davis says
You guys know your WordPress.
This is not an easy tutorial but well explained and certainly adds to my understanding.
Appreciate you educating the rest of us.
Rick says
Dude! Awesome! I had no idea about CSS option for menus! Rad-a-tad
Adam W. Warner says
Great write up, super informative! I didn’t realize the screen options for menus either.
Eli says
I’m not sure in what you should place the first php wp_nav_menu code. Would it be in the functions file or header or…?
Tony says
Didn’t know about the CSS Classes menu item! Thanks for pointing that out.
Editorial Staff says
You are welcome
Admin
Steve Meisner says
Me neither! That was exactly what I needed. God bless you all and the WordPress dev team!
Pieter says
Respect for pointing out the css styles! I always used the css attribute to style a list item, but these styles are definitely more handy. You just earned yourself another feed subscriber!
Regards from Belgium.
Editorial Staff says
Glad we were able to help Pieter.
Admin