Community Forums › Forums › Archived Forums › Design Tips and Tricks › Menu Icon
Tagged: Home Icon
- This topic has 8 replies, 4 voices, and was last updated 10 years, 7 months ago by GJudy.
-
AuthorPosts
-
February 9, 2013 at 1:22 am #19183Brain-eMember
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?
February 9, 2013 at 1:58 am #19187AnitaKeymasterI 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
youyour 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.
Love coffee, chocolate and my Bella!
February 12, 2013 at 8:48 am #19815WendyYoheMemberHi 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.comFebruary 12, 2013 at 12:42 pm #19855AnitaKeymasterWendy did you still need the padding? It looks fine to me and I am using Firefox.
Love coffee, chocolate and my Bella!
February 12, 2013 at 1:11 pm #19871WendyYoheMemberYeah, 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!
February 12, 2013 at 3:58 pm #19914AnitaKeymasterAdd this to the bottom of your Style.css file. This identifies the home image.
#menu-item-72 {
padding-left: 10px;
}
Love coffee, chocolate and my Bella!
February 12, 2013 at 4:48 pm #19940WendyYoheMemberPerfect! Thank you! =)
September 11, 2013 at 5:59 pm #62030GJudyParticipantI'm trying this on the link site. I retrieved your image and sized mine to match.
I have added the code to the edit css area and have an error sign at the last line `#nav li.home a {
background: url(images/housey2-20.png) no-repeat scroll 2px 2px transparent;
padding: 8px 20px;
text-indent: -9999px;
}`Thank you. I just saw this on another site this morning and want to do it. All of the other online directions are old.
September 11, 2013 at 9:09 pm #62043GJudyParticipantI found a plugin that lets me put the images in the navigation tabs. I'm working with the size and padding now to get the look I want. It is called Nav Menu Images
Editing. Actually the size was fine, I had my browser zoomed in so I could read the fine print. When I went back to normal, I'm happy with a 50x50 house image.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.