• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Add Image To Nav Menu Using Customizer
  • Replace Menu Item Text With Image
  • Add Icons Beside Nav Menu Links

Nav Menu

Reader Interactions

Comments

  1. Jamie Lynch says

    November 22, 2015 at 9:52 am

    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!

    Log in to Reply
    • Brad Dalton says

      November 22, 2015 at 12:04 pm

      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.

      Log in to Reply
  2. chryseis says

    November 17, 2015 at 9:45 am

    Going to try this tonight! Thanks so much !! 🙂

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.