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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Replace Menu Item Text With Image

This CSS removes the text from each primary nav menu item and replaces it with a background image which is linked to the menu item URL like this.

On the exact same responsive drop down menu, the images are removed so the text displays like this :

The image for each menu item is added to your child themes images folder.

Demo Video #

This CSS was written & tested using the Infinity Pro theme for a registered member.

#Installation

There’s 3 steps :

Step 1 : Add your images to your child themes images folder. The images used in the demo are 70px by 70px with a transparent background. Make sure the file name & extension match what’s in the CSS.

Step 2 : Copy & paste the CSS from the file in the download folder to the end of your child themes style sheet and clear caching.

Step 3 : Create a new menu named anything you like and add custom links like you see in the following screenshot :

Nav Menu

You must select the primary menu location. You can name each menu item anything you like and change the link to anywhere you like.

Should work fine in any Genesis child theme.

Register or login to access the download folder :

Register for full access

Infinity Pro Theme Nav Menu

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems