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

How to Style WordPress Navigation Menus

Last updated on by
Follow WPBeginner on YouTube
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 lovers 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 »
  • Niveditha

    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

    • http://www.wpbeginner.com/ WPBeginner Support

      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.

  • Judy

    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

    thx about information…

  • Yogesh Kumar

    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…

    • http://www.wpbeginner.com Editorial Staff

      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.

  • Jim

    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

    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

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

    • http://www.wpbeginner.com/ wpbeginner

      @wiseroner You cant just add the font-size in the main menu class in your css file.

  • wpbeginner

    @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

    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

    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

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

  • iirimina

    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

    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

    • http://www.wpbeginner.com Editorial Staff

      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.

  • Francisco

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

    • http://www.wpbeginner.com Editorial Staff

      Yes, you would utilize Menu Class parameter for that.

      • Francisco

        That’s what I was thinking. Thanks for confirming, and for getting back to me.
        Cheers!

  • Jayesh

    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.

    • http://www.wpbeginner.com Editorial Staff

      You can add your own divs etc, but it will always be the list output. You can style it to be however you want.

  • http://move-onward.com chunky

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

  • Kalid

    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!

    • http://www.wpbeginner.com Editorial Staff

      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.

  • http://psd2magento.net tuba

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

  • http://www.friendship-quotes.info GrimCris

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

  • http://easypublicspeaking.co.uk/ Keith Davis

    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.

  • http://rickmesser.com Rick

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

  • http://wpmodder.com Adam W. Warner

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

  • Eli

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

  • http://hacksocialmedia.com Tony

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

    • http://www.wpbeginner.com Editorial Staff

      You are welcome :)

    • http://websitesthatdostuff.com Steve Meisner

      Me neither! That was exactly what I needed. God bless you all and the WordPress dev team!

    • http://www.siteoptimo.com Pieter

      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.

      • http://www.wpbeginner.com Editorial Staff

        Glad we were able to help Pieter.