Menu Icon

This topic is: resolved

Tagged: 

This topic contains 8 replies, has 4 voices, and was last updated by  GJudy 1 year, 1 month ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #19183

    Brain-e
    Participant
    Post count: 20

    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?

    #19187

    AC
    Blocked
    Post count: 7712

    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.

    #19815

    WendyYohe
    Participant
    Post count: 14

    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

    #19855

    AC
    Blocked
    Post count: 7712

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

    #19871

    WendyYohe
    Participant
    Post count: 14

    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!

    #19914

    AC
    Blocked
    Post count: 7712

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

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

    #19940

    WendyYohe
    Participant
    Post count: 14

    Perfect! Thank you! =)

    #62030

    GJudy
    Participant
    Post count: 63

    I’m trying this on the link site. I retrieved your image and sized mine to match.
    House
    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;
    }`

    http://joyrossdavis.com

    Thank you. I just saw this on another site this morning and want to do it. All of the other online directions are old.

    • This reply was modified 1 year, 1 month ago by  GJudy.
    • This reply was modified 1 year, 1 month ago by  GJudy.
    • This reply was modified 1 year, 1 month ago by  GJudy.
    • This reply was modified 1 year, 1 month ago by  GJudy.
    #62043

    GJudy
    Participant
    Post count: 63

    I 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 50×50 house image.

    • This reply was modified 1 year, 1 month ago by  GJudy.
    • This reply was modified 1 year, 1 month ago by  GJudy.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.