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 Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
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 Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
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