Make a WordPress Menu that Stands Out From the Crowd

Create a truly unique WordPress menu

This little tutorial will show you how easy it is to create an image-based custom menu for your WordPress site or blog, similar to the screenshot below (taken from the Twenty-Eleven theme with header image hidden for clarity). It only works for a menu with top-level items only though; sorry, no sub-menus. I haven’t yet figured out a way to do this with drop-down sub-menus; when I do though, I’ll definitely do another write-up!

Don’t worry, we won’t be doing anything complicated with php, or javascript, or jquery. Everything in this article can be done by simply uploading images to your WordPress media library, and adding a few new style rules to your active theme’s style-sheet.

Find the main nav ID

Regardless of the theme you’re using, you first need to find the ID of the main navigation container. If you don’t know what that ID is, you can easily find it using your browser’s developer tools (see the “Identify the main nav container” section of this post for some tips). Got the ID? Good.

Upload your images

Simply upload your menu item images to your WordPress media library, and copy the file URLs to a blank text file to keep them handy (we’re gonna need them for the CSS).

Create a WordPress menu

It may be a good idea to create a test menu for this exercise. In the example screenshot above, the 5 item names are rather evident, but you can name yours anything you like.

Assign your menu item classes

To be able to assign a specific image to each menu item, we need to assign a specific CSS class to each one of them. If you don’t already see the “CSS classes” option for individual menu items in your WordPress menu editor, click the “Screen Options” tab at the top-right of your screen, then tick the “CSS Classes” checkbox (see screenshot below).

Give each menu item in your test menu a unique class name, for example: menu-bg1, menu-bg2, menu-bg3, etc. Save your menu, then select it in the “Theme locations” box at the top-left of your menu editor screen. Now refresh any page on your site to make sure your menu shows up. See your new menu? Good, let’s get the images in there.

The CSS you’ll need

Below is the basic CSS you’ll need to add to your WordPress theme’s style-sheet (I do hope you’re using a child-theme!). If you’ve used the images from the example zip file, or made your own the same size (122x40px), you don’t need to adjust the padding or width in the 1st style rule (if your own images are a different size, adjust accordingly). You do need to edit each occurrence of 2 things specific to your theme though:

• #access = the ID of your theme’s main nav container
• .menu-bg* = the CSS classes you assigned to your menu items

If you want a purely image-based WordPress menu, simply set the color in the first style rule to transparent. This will effectively hide the link text from view.

#access .menu-bg1 a, #access .menu-bg1 a:hover, #access .menu-bg1 a:focus, 
#access .menu-bg2 a, #access .menu-bg2 a:hover, #access .menu-bg2 a:focus, 
#access .menu-bg3 a, #access .menu-bg3 a:hover, #access .menu-bg3 a:focus, 
#access .menu-bg4 a, #access .menu-bg4 a:hover, #access .menu-bg4 a:focus, 
#access .menu-bg5 a, #access .menu-bg5 a:hover, #access .menu-bg5 a:focus {
background-repeat:no-repeat;
background-position:0.5em 0.5em;
color:#555;
padding:10px 0 0 60px;
width:70px;
}
#access .menu-bg1 a, #access .menu-bg1 a:hover, #access .menu-bg1 a:focus {
background-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#1-GOES-HERE');
}
#access .menu-bg2 a, #access .menu-bg2 a:hover, #access .menu-bg2 a:focus {
background-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#2-GOES-HERE');
}
#access .menu-bg3 a, #access .menu-bg3 a:hover, #access .menu-bg3 a:focus {
background-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#3-GOES-HERE');
}
#access .menu-bg4 a, #access .menu-bg4 a:hover, #access .menu-bg4 a:focus {
background-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#4-GOES-HERE');
}
#access .menu-bg5 a, #access .menu-bg5 a:hover, #access .menu-bg5 a:focus {
background-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#5-GOES-HERE');
}

Save/upload your style-sheet, the refresh any page on your site. You should see your new images for each item in your WordPress menu. Note that you may need to adjust the background-position, padding and/or width in the first style rule above to get things looking just right for your site.

A simple hover effect

Finally, let’s add a little hover effect to each item in your new WordPress menu. This effect will simply give a bit of transparency to each image when you hover your mouse pointer over it, allowing the background color of your main nav container to show through. Go ahead and adjust the opacity and transition time to suit your own tastes.

#access .menu-bg1 a:hover, #access .menu-bg1 a:focus, 
#access .menu-bg2 a:hover, #access .menu-bg2 a:focus, 
#access .menu-bg3 a:hover, #access .menu-bg3 a:focus, 
#access .menu-bg4 a:hover, #access .menu-bg4 a:focus, 
#access .menu-bg5 a:hover, #access .menu-bg5 a:focus {
color:#fff;
opacity:0.7;
filter:alpha(opacity=70);
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

That’s it, we’re done!

I hope you enjoyed this little WordPress menu tut and find use for it. If you need a hand with anything, or want to show off what you make with, please leave a comment below with a link to your site. Thanks for reading!