Style Your WordPress Menus With Custom CSS

WordPress offers you a lot of styling options for your menu right out of the box. By default, the menu comes with a ton of CSS classes applied to it already, which gives you immense control on styling it.

Here’s a full list of all the CSS menu classes:

.menu-item – This class is added to every menu item.
.menu-item-object-{object} – This class is added to every menu item, where {object} is either a post type or a taxonomy.
.menu-item-object-category – This class is added to menu items that correspond to a category.
.menu-item-object-tag – This class is added to menu items that correspond to a tag.
.menu-item-object-page – This class is added to menu items that correspond to static pages.
.menu-item-object-{custom} – This class is added to menu items that correspond to a custom post type or a custom taxonomy.
.menu-item-type-{type} – This class is added to every menu item, where {type} is either “post_type” or “taxonomy”.
.menu-item-type-post_type – This class is added to menu items that correspond to post types: i.e. static pages or custom post types.
.menu-item-type-taxonomy – This class is added to menu items that correspond to taxonomies: i.e. categories, tags, or custom taxonomies.
.current-menu-item – This class is added to menu items that correspond to the currently rendered page.
.current-menu-parent – This class is added to menu items that correspond to the hierarchical parent of the currently rendered page.
.current-{object}-parent – This class is added to menu items that correspond to the hierachical parent of the currently rendered object, where {object} corresponds to the the value used for .menu-item-object-{object}.
.current-{type}-parent – This class is added to menu items that correspond to the hierachical parent of the currently rendered type, where {type} corresponds to the the value used for .menu-item-type-{type}.
.current-menu-ancestor – This class is added to menu items that correspond to a hierarchical ancestor of the currently rendered page.
.current-{object}-ancestor – This class is added to menu items that correspond to a hierachical ancestor of the currently rendered object, where {object} corresponds to the the value used for .menu-item-object-{object}.
.current-{type}-ancestor – This class is added to menu items that correspond to a hierachical ancestor of the currently rendered type, where {type} corresponds to the the value used for .menu-item-type-{type}.
.menu-item-home – This class is added to menu items that correspond to the site front page.

The following classes are added to maintain backward compatibility with the wp_page_menu() function output:

.page_item – This class is added to menu items that correspond to a static page.
.page-item-$ID – This class is added to menu items that correspond to a static page, where $ID is the static page ID.
.current_page_item – This class is added to menu items that correspond to the currently rendered static page.
.current_page_parent – This class is added to menu items that correspond to the hierarchical parent of the currently rendered static page.
.current_page_ancestor – This class is added to menu items that correspond to a hierarchical ancestor of the currently rendered static page.

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

Here’s a sample output of a menu from the new Twenty Twelve theme:

<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-146" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-142 current_page_item menu-item-146"><a href="http://twentytwelvedemo.wordpress.com/">Home</a></li>
<li id="menu-item-145" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-145"><a href="http://twentytwelvedemo.wordpress.com/about-2/">About</a></li>
<li id="menu-item-147" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-147"><a href="http://twentytwelvedemo.wordpress.com/blog/">Blog</a></li>
</ul></div>

So what can you exactly do with all of the above? Here’s a few examples.

Let’s say you want to style the Gallery post type, you would take the CSS class for it and add your bit of styling to it, which would be:

.menu-item-object-gallery { /* your CSS styling comes here */ }

Let’s say you want to show the current Page/Category in a different color, or with an icon perhaps, you could take this CSS class and add your specific link color choice by appending the “a” tag:

.current-menu-item a { color: red; }

to add an icon, you would specify it in the background tag:

.current-menu-item a { background: url(your/image-path.jpg) no-repeat left center; color: red; }

Similarly, you can specify various CSS styles for each and every single category, custom post type etc…on your blog. Though, be prepared to dig into the source code to know what classes you need to style.

If you want to give the whole menu a new container class, you can do so like this:

wp_nav_menu( array( 'container_class' => 'my-menu-class' ) );

To learn more about the menus visit the codex page, wp_nav_menu.

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more
Tags ,

Comments (4)

  1. Just used this info to style a menu on one of my client’s websites thats been bothering me for quite a while. Thanks! I love articles like these that tell you exactly which native ids and classes are being used.

Participate