This tutorial, written for a member, provides the code which enables you to add images to nav menu items in any WordPress theme.
All code is tested on the Genesis Sample child theme by StudioPress.
There’s 3 different solutions included in this post to:
- Add images behind each menu items
- Add images above each menu item, centered & clickable
- Add images in replace of menu item labels removing the text link
Here’s an example:
Here’s the code:
Jamie Lynch says
Is it possible to add an image to the navigation menu (which I’ve done), but REMOVE the “label”/link name? At the moment I’ve simply used a period in place of a title, but because I have a hover css attribute that changes the color of the link upon hover, the period shows up when hovering over the image.
Brad Dalton says
Did you want to add icons or images to your nav menu? I can’t see any images in your menu.
Use text-indent to remove the label like this:
Where div is your menu item class.
See the full code in the updated post above.
Going to try this tonight! Thanks so much !! 🙂