Wordpress: replace primary menu with Image Sprite

I was recently asked to help out with getting a CSS Image Sprite to work as a replacement for the default primary menu / navigation bar on a new WordPress site. I have to admit that whilst I have seen the effect used on some websites I had no specific idea of what a CSS Sprite was or how it worked, so of course I enlisted the help of my buddy Google to find out more. The basic idea with using what is called a Sprite instead of the old fashioned image map or a button graphic is that they are quicker loading.

Ok, but what is a Sprite you may still be wondering. Its basically a collection of images put together into a single image – and then used for multiple “buttons”. The “before” state image is in the top row, and the image for the hover or active state is in the row below. The image as a whole is divided up into a grid. Most usually used for Social Media links on websites. Because it is one single image it only has to load once, and then each “button” is referenced with CSS positioning, showing only the part of the image we need in each case for each state.

I found one tutorial relating to the Thesis theme which seemed promising, and which I used as my starting point. I was having limited success though – the menu was showing the images correctly in the default state, but on hover and active states the image was not showing at all, and the CSS positioning was being ignored completely. After a bit more research I tried a completely different method thanks to A List Apart, which worked very nicely.

So with the help of Firebug (thank goodness for these tools) on Firefox I managed to narrow down a problematic bit of CSS code in the responsive layout for the theme, and after commenting that out and making a few small changes to the inherited CSS code for the hover states I got it working.

This is what worked in the end:

Setup your primary WordPress menu using custom links vs the default page or category options.
Create your graphic in a grid format with the top row for the default image and the bottom for the clicked / active / hover images. Take note of the height of the top and bottom rows (should be the same ideally) and the width of each pair in pixels.
Upload your graphic to your server via the WordPress Media option or FTP. Take note of the URL to the image.
Using Firebug (or equivalent on Chrome) identify the ID’s for each of your custom menu links.

Add the following code to the style.css in your child theme (yes you should use a child theme).

The first lines add the graphic as a background to your main navigation. Make sure the height and width are set to the width of the entire image, and the height to the “fold” (i.e. half the image) in pixels.

#main-nav {
    width: 891px; height: 65px;
    background: url(images/Menu.jpg);
    margin: auto; padding: 0;
    position: relative;
}
#main-nav li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;
    background: transparent;
}

#main-nav {

width: 891px; height: 65px;

background: url(images/Menu.jpg);

margin: auto; padding: 0;

position: relative;

}

#main-nav li {

margin: 0; padding: 0; list-style: none;

position: absolute; top: 0;

background: transparent;

}

The next lines remove any inherited padding from the theme itself. Here you will have to play around using Firebug to make sure you unset any strange styling.

#main-nav li, #main-nav a {
    height: 65px; display: block;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

#main-nav li, #main-nav a {

height: 65px; display: block;

padding-top:0 !important;

padding-bottom:0 !important;

}

Then you add CSS to show the default graphic for each custom menu item using the IDs already identified and the sizes you worked out earlier. You will only be showing the top “half” or row at this stage.

#menu-item-186 {left: 0;width: 134px;text-indent:-9999px;}
#menu-item-161 {left: 143px;width:145px;text-indent:-9999px;}
#menu-item-162 {left: 288px;width:137px;text-indent:-9999px;}
#menu-item-163 {left: 425px;width:125px;text-indent:-9999px;}
#menu-item-164 {left: 550px;width:159px;text-indent:-9999px;}
#menu-item-165 {left: 709px;width:182px;text-indent:-9999px;}

#menu-item-186 {left: 0;width: 134px;text-indent:-9999px;}

#menu-item-161 {left: 143px;width:145px;text-indent:-9999px;}

#menu-item-162 {left: 288px;width:137px;text-indent:-9999px;}

#menu-item-163 {left: 425px;width:125px;text-indent:-9999px;}

#menu-item-164 {left: 550px;width:159px;text-indent:-9999px;}

#menu-item-165 {left: 709px;width:182px;text-indent:-9999px;}

The negative text indent value above ensures your text menu item doesn’t show over the top.

Lastly add the active and hover states, to show the bottom half of the pair in each case. Here the negative value in the positioning moves the shown part of the image along to the right, and down, according to the size of the part of the image you want to show.

#menu-item-186 a:hover, #menu-item-186.current-menu-item a {
    background: transparent url(images/Menu.jpg)
    0 -65px no-repeat;}
#menu-item-161 a:hover, #menu-item-161.current-menu-item a {
    background: transparent url(images/Menu.jpg)
    -143px -65px no-repeat;}
#menu-item-162 a:hover, #menu-item-162.current-menu-item a {
    background: transparent url(images/Menu.jpg)
    -288px -65px no-repeat;}
#menu-item-163 a:hover, #menu-item-163.current-menu-item a {
    background: transparent url(images/Menu.jpg)
    -425px -65px no-repeat;}
#menu-item-164 a:hover, #menu-item-164.current-menu-item a {
    background: transparent url(images/Menu.jpg)
    -550px -65px no-repeat;}
#menu-item-165 a:hover, #menu-item-165.current-menu-item a {
    background: transparent url(images/Menu.jpg)
    -709px -65px no-repeat;}

#menu-item-186 a:hover, #menu-item-186.current-menu-item a {