Menu Icon

[Brain-eParticipant Post count: 5]

I would like to change the Home label in the Menu to a quaint little picture of a house

I tried a tutorial I found but it didnt seem to work with the executive theme. Any joy?

[anitacModerator Post count: 2690]

I tinkered around with this a year ago and still had how I got it to work. I think someone showed me on the old forum. But here’s how I did it.

Go here and copy the little house icon I used – https://www.dropbox.com/s/7me8dpcsv8cd3rn/home.png. Save this in your wp-content/themes/YOURTHEME/images file folder.

Then go to you your Menus and open up the Home tab. Look for a field called “CSS CLASSES”. If you don’t see it, click the SUPPORT tab in the top right corner – check the box and then close the Support tab. That field will now be in the Menu area.

In the CSS CLASSES of the Home tab – put this – nav li home a – then SAVE your menu.

Then go to Appearance > Editor and add this to your Style.css:

#nav li.home a {
background: url(“images/home.png”) no-repeat scroll 2px 2px transparent;
padding: 8px 20px;
text-indent: -9999px;
}

Depending on your theme, you may have to play around with the padding, etc. You can then find a “home” icon you like and replace the one you copied from me.

It should work for you.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[WendyYoheParticipant Post count: 13]

Hi anitac!

Thanks for the instructions! It worked perfectly (except that I had to remove the quotation marks from around the image URL). Now I want to add a little padding to the left of the icon but I can’t seem to make it work.  Can you offer some guidance?  =)

Thanks!

Wendy
Johnstown360.com

[anitacModerator Post count: 2690]

Wendy did you still need the padding? It looks fine to me and I am using Firefox.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[WendyYoheParticipant Post count: 13]

Yeah, I do. I’m a bit of a perfectionist. LOL

I need to add just a bit of padding to the left of the icon (between the icon and the edge of the content area).

Thanks!

[anitacModerator Post count: 2690]

Add this to the bottom of your Style.css file. This identifies the home image.

#menu-item-72 {
padding-left: 10px;
}

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[WendyYoheParticipant Post count: 13]

Perfect! Thank you! =)

[Author]

Posts