Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Style WordPress Navigation Menus

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Style WordPress Navigation Menus

In WordPress 3.0, there was a milestone feature added known as WordPress Menus. We covered an article on how to add a secondary menu in Twenty Ten theme. But upon a recent request by our user, we will be covering how to style the WordPress Menu. In this article, we will discuss different classes that are added by default within the WordPress menus that we can use to style each individual menu.

Note: This article requires you to have intermediate knowledge of CSS, and a fair understanding of how WordPress works.

First thing that everyone should know is that WordPress Menus are displayed in an unordered list format, so your theme would need to have these classes specified. For example, if you just add:

<?php wp_nav_menu(); ?>

Then it will add the menus under a <div> container tag without any class associated to that container. Your unordered list would have the class name menu with numerous lists each with it’s own classes. This might work if you only have one menu running on your entire page, but if you want to have more customization options, you will want to use the parameters like: ‘container_class’, ‘container_id’, ‘menu_class’, and ‘menu_id’. It is also best to name each menu, and give it a location. So now your menu code should be something like this:

<?php wp_nav_menu(array( 'sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'container_id' => 'header', 'theme_location'  => 'header') ); ?>

Here we specified that our menu name is Categories which should be placed under the container with an id of header, and class of main-menu. This means, we are probably developing our primary menu right now. Your output code would now be under the following tags:

<div id="header" class="main-menu"><ul id="menu-categories" class="menu">

Remember, you do not have to add the container id if your theme is not functioning like that. You can go just with the container_class parameter. So in your CSS file now you would need to style classes in the following order:

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

Now these are some of the default classes that you can style that are essential to have your menu looking somewhat like how it should be. Now here are some other classes that WordPress adds within the menus to allow for further customization:

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

Notice all the classes that we have mentioned above are within the list tags. You don’t necessarily have to edit every single one of them either. We usually do not bother with any menu-item-type class because none of our designs need that sort of customization. But if your site does, then feel free to edit those classes.

Now up until this point, all we have talked about is classes that are generated by WordPress. Often when designing in WordPress, you will find a need to associate a class for an individual menu item. For example, you want each navigation top-level item to have icons like this:

Robin Harpe's Menu

Well, WordPress has the option to do this in the admin panel in the menu screen, but by default it is checked off. So first thing you need to do is go to your Appearence » Menus screen, and click on the screen options tab, and check the Classes tab.

Adding classes for each individual WordPress Menu

Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.

Adding additional classes for each individual WordPress Menu

You can add individual classes in each item to customize the display of it. This is how we achieved the icon next to each top level navigation menu.

If you are using any framework like Genesis, Builder, etc. You will be guided through out the process. Genesis even has an option to do smooth drop down menus with Superfish built-in.

We hope that this article was helpful, and if we have missed something, please let us know in the comments.

For additional Parameters of the WP Menu refer to the WordPress Codex

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. 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.

  2. Arsh Dznr says:

    i m ussing my css menu in wordpress but menus dropdown not showing pls help me


  3. 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?


  4. 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.

  5. Niveditha says:


    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!

    • 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.

  6. Judy says:

    I would kill for an infographic for what all those classes actually modify. Like:


    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…

  7. Tarmizi Achmad says:

    thx about information…

  8. 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: li ul{width: 220px;} li li{float: left; width: 100px;}

      Now this would set each second level list item to have an exact width and float left.

  9. Jim says:

    Great article, thanks.

    I never new about that CSS class feature, at least I know now.

    Its really going to benefit me.


  10. 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 :)

  11. 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! :)

  12. 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.

  13. 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

  14. 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?

  15. wpbeginner says:

    The way WordPress navigation menus work, it will automatically know which page is the current one..

  16. 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?

  17. 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?


    • 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.

  18. 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, :-)

  19. 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.

  20. chunky says:

    Thank you! Now I can stop pulling my hair out! Bookmarked this and will tell others! :)

  21. 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.

  22. tuba says:

    very nice article, helped me for my wordpress project, thanks!

  23. GrimCris says:

    Great article. I didn’t know about the CSS classes in WordPress Menus. Thank you so much!

  24. 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.

  25. Rick says:

    Dude! Awesome! I had no idea about CSS option for menus! Rad-a-tad

  26. Adam W. Warner says:

    Great write up, super informative! I didn’t realize the screen options for menus either.

  27. 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…?

  28. Tony says:

    Didn’t know about the CSS Classes menu item! Thanks for pointing that out.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.