» » Wow Your Customers With a Different Image for Each Menu Item

Wow Your Customers With a Different Image for Each Menu Item

posted in: Wordpress Tips | 2

Sometimes you get a customer that just needs something different or WOW’ish like for instance – a Different Image for Each Menu Item.

Firs I need to thank Dan Treadwell for helping me on the path.

First important thing to do is to set your menu screen to show ‘Classes’ as shown in the following Screen Capture:

Set Menu Screen to Show Classes
Set Menu Screen to Show Classes

 

The next thing is to add your image – You can do this by clicking on ‘Media–>Add New and copying and pasting it into the next section.

Now add the following to your theme’s CSS.

.i10 { (NOTE-You can name your class anything you like - I named mine 'i10' as it is the image I would like to add, and it makes it easier to remember - DELETE THIS BEFORE ADDING TO YOUR THEME'S CSS!!)
color:#ffffff;
background-image: url('http://full-URL-to-your-image.png');
background-repeat: no-repeat;
height: 30px;  (Note-Change this to the required height of your image - DELETE THIS BEFORE ADDING TO YOUR THEME'S CSS!!)
}
.i10 a.active {
color:#ffffff;
background-image: url('http://full-URL-to-your-image.png');
background-repeat: no-repeat;
height: 30px;
}

Now open your menu panel within your Dashboard and place your Newly Created Class in the “CSS Classes” box as shown in the next Screen Shot:

Call your Created Class in Your Menu Panel
Call your Created Class in Your Menu Panel

 

You  can create a different class for each menu item this way and then call the specific class from your ‘Menu Dashboard.’

The Final Product with a Different Image for Each Menu Item will look something like this (depending on your settings and images used)

Different Image for Each Menu Item
Different Image for Each Menu Item

2 Responses

  1. website
    | Reply

    First of all I want to say fantastic blog! I had a quick question which
    I’d like to ask if you do not mind. I was curious to know how you center yourself and clear your mind before writing.
    I have had trouble clearing my mind in getting my thoughts out.
    I do enjoy writing but it just seems like the first 10 to
    15 minutes are usually lost just trying to figure out how to begin.
    Any recommendations or tips? Appreciate it!

    • Freelance Express - Wordpress Web Design
      | Reply

      Hi there. I know what you mean! The best way is usually to check what is trending in google, and then write an article about that – if it is within your expertise field. I haven’t have much time lately for writing, but I’ve setup a schedule for myself now, so that I post at least 1 article per week.

Leave a Reply