The WordPress function wp_nav_menu() is a great way to give users the ability to control their menu items in WordPress 3.0+. You can easily add/delete/move menu items from WordPress admin panel. I was recently working on a site where I wanted to add a class to add different colors for each menu item. Fortunately, this can be done very easily by doing the following:
1. Click on the Screen Options tab at the top right of the admin panel when on the Menu admin page (Appearance > Menus).
2. Select CSS Classes under Show advanced menu properties. (You will also see options to add a link target, description, and a link relationship).
3. Edit your menu items and now notice there is a field to add a class for each individual item.
This is a great way to add a custom class to Navigation menu items.
Now using “menu-change” class or the class which u applied in above box, you can apply styles the way you want.
Why not just use the IDs?
I specifically did this because I was using multiple menus (same menu class) and instead of using the list item IDs to add custom CSS for multiple IDs – I simplified it by adding different classes that would then cover all my menus.
Here is your Colourful menu Output:
Thus with the help of WordPress 3.0+ you can easily give your navigation menu a new look. Do drop in your opinions and comments below.
18 Comments
Hey Manish. Thanks for the info. I didn’t even realize that option was there. I did have a little trouble getting the class to override parts of the original style, but adding !important to the new class solved it.
Hey Shaun, glad to know that above article helped you. About your doubt of overriding the css: I think you might haven’t given proper specificity. eg. to apply the style to anchor element appearing inside li element we should specify it like- ul li a { …your style…; }. this should resolve your problem. Let me know if I am not specific. 🙂
I also didn’t realize this option was there. But then, let me ask, how would you put a custom class on an active element using the menu?
hey Seye, whenever you select any menu wordpress put “current-menu-item” for wp_nav_menu() and “current-page-item” for wp_list_pages().
so you can use these classes for active menu styling
Just what I was looking for. Unfortunately some of the other posts on this matter fall short on the explanation of what to put in the css-classes box. I’m glad I found your source.
Hi,
I tried using this option, but it didn’t work.. Defined a class in my stylesheet then put its name in the “CSS Classes” field. But, the style did not apply.. Is there something specific that I should do in order for it to work?
thanks
Thanks for sharing this helpful information…last few days i am finding this question answer now got it ..Thanks a lot
Thanks for sharing
What about if I need to add more than one class to the menu link (a href) instead of the menu item.
Hi RaiGA,
You can add multiple css classes from same place. Just separate them using spaces. By default the classes will get applied to li items and not the anchor elements. But you can use wp_nav_menu_items filter hook. This gives you all the li items. Then you need to write some code to process these li items and apply the css classes to anchor elements instead of list items.
Let me know if this helps.
Hi thanks for the info could you give me the css to target ( #access a) to change an individual menu item description color.
Hi Mark,
Not clear with your question. Could you elaborate.
From what I understood is that you want to change the link color as shown in my example. For that you would need to open the particular menu item in the back-end and add a class to it such as “custom-access”. And then in your style.css add the following line :
.custom-access a {
color: #ff9900;;
}
Here you can change the color code as needed.
Let me know if this is what you require.
Very nice article, great share but am not so clear about the explanation.
Maybe if i ask my question this way, you might be able to give me a more less complicated response.
“I have about 5 menus and would like each to have 5 different colors, now based on your explanation.
Can you tell me exactly what to write in the “CSS CLASSES” box for each menu and also please tell me exactly what to write in the style.css’
I hope i was clear in my explanation. Lets assume you were me,
Thanks in advance
Hello twomuch,
You can add the classes for each color in style.css. So if you want to add class for blue color, then you would write following:
.blue-menu-item { color: blue; }Now “blue-menu-item” will be your class, which you need to add in the classes box.
Do this for each color you want. I hope this helps.
Thanks,
Hello,
Thanks for writing this article, although I am having some trouble, maybe you could help (please)…
Here is my theme’s style for items that appear in a dropdown menu;
.associate-gray #header ul.menu li li a,
.associate-gray #header ul.menu li li a:link,
.associate-gray #header ul.menu li li a:visited,
.associate-gray #nav li li a,
.associate-gray #nav li li a:link,
.associate-gray #nav li li a:visited {
background-color: #000000;
border: 1px solid #aaa;
border-top-width: 0;
color: #fff;
}
There are 10 items in the dropdown and I would like to change the background color of the last item only to B30000.
I have tried numerous things but nothing works.
Can you assist?
Thanks, Ross.
Hello Ross,
If you want to change background color of last item in dropdown, just add the custom class to that last menu as shown in above article and do minor change in your stylesheet.
I gave custom “rt-last-item” class to last menu item and made changes in stylesheet shown below,
.associate-gray #header ul.menu li li.rt-last-item a, .associate-gray #header ul.menu li li.rt-last-item a:link, .associate-gray #header ul.menu li li.rt-last-item a:visited, .associate-gray #nav li li.rt-last-item a, .associate-gray #nav li li.rt-last-item a:link, .associate-gray #nav li li.rt-last-item a:visited { background-color: #B30000; }Hope this will help you, let me know if you face any problem.
Thanks
Hi . I made a theme for wordpress by my own and add wp-nav-menu in the header . and i want to change the active tab on the nav-menu . i tried to change it from dashboard and i can’t , can you help me please
Hi Reza,
You can easily show “active menu” ussing CSS. In rtPanel we have used following selectors to change active menu style, you need make these changes in style.css
Normal State :-
#rtp-nav-menu .current-menu-item > a,
#rtp-nav-menu .current_page_ancestor > a,
#rtp-nav-menu .current_page_item > a { color: blue; }
Hove State :-
#rtp-nav-menu .current-menu-item > a:hover,
#rtp-nav-menu .current_page_ancestor > a:hover,
#rtp-nav-menu .current_page_item > a:hover { color: red; }
“rtp-nav-menu” is the ID of <ul> (parent selector) tag and “current-menu-item, current_page_ancestor and current_page_item” are dynamically generated classes which added to active menu (<li> tag) by wordpress itself.
Let me know if you have any other doubt.
Thanks,
Manish