How to Apply Custom CSS Classes to a Custom Menu

This tutorial will show you how to apply custom icons to your individual menu items, as well as customize and add additional links to the Primary Navigation extras. It uses the Delicious child theme for demonstration purposes.

Step One:

Set up a Custom Menu for your Primary Navigation.

Step Two:

Create custom css classes for each item.

For the Home link, I used the following:

#nav li.home a {
    background: url(images/home.png) no-repeat left center;
    padding: 0 0 0 25px;
    border: none;

For individual links, since I chose not to use unique icons, this code was used:

#nav li a {
    background: url(images/star.png) no-repeat left center;
    font-family: Tahoma,Arial,Verdana;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    height: 28px;
    line-height: 26px;
    margin: 5px 0 0 0;
    padding: 0 0 0 25px;
    text-decoration: none;
    position: relative;
    border: 1px solid transparent;

#nav li:hover a, #nav li:active a {
    background: #404040 url(images/star.png) no-repeat left center;
    border: 1px solid #333333;
    border-radius: 6px;
    -moz-border-radius: 6px;    
    -webkit-border-radius: 6px;    
    -webkit-background-clip: padding-box;    
    -webkit-background-origin: padding-box;

Step Three:

Enable Custom CSS Classes via the Screen Options button.

Step Four:

Add your custom menu item to the menu. Be sure to assign the CSS class.

Step Five:

The Twitter link is also a custom menu item, with a special CSS class. Note the left margin in the code given below – this positions the link on the right side of the navigation. It can be edited according to the number of menu items present.

#nav li.twitter a {
    background: url(images/twitter-nav.png) no-repeat left center;
    margin: 0 0 0 350px;
    padding: 3px 0 1px 20px;
    border: none;

Speak Your Mind