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 :

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.