Icons in Primary Menu

  • Author
    Posts
  • #30080

    resultsba
    Member

    Is there a way to add icons/images to the custom menu below the header?

    The blog I need help with is resultsba.com.

    #30202

    binarymoon
    Theme Author

    You can do this with the custom css editor.

    You would need to upload the icons somewhere – and then get the css classes (using something like firebug or the chrome page inspector), and then do something like this for each link:

    li#menu-item-181 a {
    background:url(http://path/to/image.jpg) 5px 5px no-repeat;
    padding-left:24px;
    }

    Note that I’ve done this without knowing the size of your icons and without testing so it may need tweaking. I’d recommend something around 16px square, maybe up to 20px.

    Don’t know how much you know about css so there’s more info here: http://en.support.wordpress.com/custom-design/css-basics/

    #30214

    resultsba
    Member

    Thank you for help! That works great. Now I just need to make some adjustments to the icons if possible. I would like to make them hover above the menu items. For example, I tried using this for my “Contact Us” menu:

    li#menu-item-63 a:hover, li#menu-item-63 a:focus {
    background:url(http://resultsba.files.wordpress.com/2013/05/contactus.png) 5px 5px no-repeat;
    padding-left:24px;
    }
    This doesn’t accomplish moving the icon above the menu item though. Do you have any suggestions?

    Also, I notice the icons also appeared on all of the sub-menu items of the primary menu. Do you have any suggestions to get rid of that?

    #30288

    binarymoon
    Theme Author

    The following ‘should’ remove the background image from the drop down lists (the sub menus)

    li li a { background-image:none; padding-left:10px; }

    Not sure what you mean regarding putting the image about the menu item? Possibly something like this (also untested):

    li#menu-item-63 a { padding-top:20px; background:url(image) center 5px no-repeat; }

    #30317

    resultsba
    Member

    Removing the icons from sub menus worked perfectly. I’m still trying to figure out how to make your second suggestion work. I want the icons to sit about the menu titles. I’ll keep trying, but either way everything looks great now. I appreciate all of your help!

The topic ‘Icons in Primary Menu’ is closed to new replies.