WP SITES

2757

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

3 Ways To Add Images To Nav Menu Items

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:

  1. Add images behind each menu items
  2. Add images above each menu item, centered & clickable
  3. Add images in replace of menu item labels removing the text link

Here’s an example:

center-image-above-menu-item

Here’s the code:

Register for full access

Related Tutorials

Reader Interactions

Comments

  1. 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.
    http://t2energysolutions.com
    Thanks!

    • 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:

      .div a {
    text-indent: -9999px;
}

      Where div is your menu item class.

      See the full code in the updated post above.

Leave a Reply