Menu Icon

This topic is: resolved

Tagged: 

This topic contains 8 replies, has 4 voices, and was last updated by  GJudy 10 months, 3 weeks ago.

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

    Brain-e
    Participant
    Post count: 19

    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

    anitac
    Participant
    Post count: 7042

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #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

    anitac
    Participant
    Post count: 7042

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #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

    anitac
    Participant
    Post count: 7042

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

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #19940

    WendyYohe
    Participant
    Post count: 14

    Perfect! Thank you! =)

    #62030

    GJudy
    Participant
    Post count: 60

    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 10 months, 3 weeks ago by  GJudy.
    • This reply was modified 10 months, 3 weeks ago by  GJudy.
    • This reply was modified 10 months, 3 weeks ago by  GJudy.
    • This reply was modified 10 months, 3 weeks ago by  GJudy.
    #62043

    GJudy
    Participant
    Post count: 60

    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 10 months, 3 weeks ago by  GJudy.
    • This reply was modified 10 months, 3 weeks ago by  GJudy.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.