Easily Add an Image to your menu (How-To)

Hi everybody,

This isn't a support question, I just thought I'd share something that to many is a simple and obvious thing, but to others could be a Eureka moment.

If you want to add an image to a menu item, just as I have done on my site at http://www.writereads.com, as shown in the image below, this is very simple and just takes a little bit of code added to your style.css file.

In the image above, I have the picture of the house, instead of the boring 'Home' link.

1)
Using something like Firebug, hover over the menu item where you want to place the image

2)
Take a note of the menu item number

3)
Open your style.css file & add the following at the end of it:

#menu-item-38 {
background: #4f5084 url(images/home-menu.png) no-repeat;
width: 55px;
}

4)
The above example has the file in the images folder, within the theme folder. You also need to make the image size whatever you need it to be.

5)
Edit the menu item within your WordPress admin, and place a period/full stop in there, as this stops the image looking weird.