Need help? Check out our Support site, then


Adding a CSS icon to menu

  1. Hello,

    I've been searching for awhile now on how to install a icon on the menubar with a custom image. Specifically, I'm trying to place a twitter icon in my menu. I got the code to work fine except it just doesn't show the image and the image is in my media. Here is what my code looks like:

    .menu-twitter {
    text-indent:-9999px;
    background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png');
    background-repeat:no-repeat;
    margin-left:100px;
    width:50px;
    }

    You can see it just showing up as a black box without the image. Am I calling the image incorrectly? Any help would greatly be appreciated

    The blog I need help with is brolicbeats.net.

  2. I think what you'll need to do is move some of that code to .menu-twitter a.

    Right now, your nav a is overriding all your menu-twitter a stuff, which is where you want your twitter icon to appear.

    So create a CSS class like this:

    .menu-twitter a {background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png') no-repeat;
    }

    And make sure to remove the duplicated background info from the original menu-twitter item, and see how you fare.

    Good luck!
    -Z

  3. Thanks for your help! Quick question though, am I attaching that code to the code I previously had or am I replacing it? i.e. what should the final code look like?

    Thanks so much!

  4. Add that line above to your custom stylesheet, then edit your .menu-twitter item that you previously added. Does that help?

  5. okay great! What am I editing in the previous code? You mentioned removing the background info but I'm a little confused on how to do that.

  6. Ah ok, in your item

    .menu-twitter {
    text-indent:-9999px;
    background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png');
    background-repeat:no-repeat;
    margin-left:100px;
    width:50px;
    }

    remove all the stuff that is background related (the line "background-image" and the line "background-repeat"). You can just delete them, because both those lines are incorporated into the new line you're creating for the menu-twitter anchor selector, so they're total duplicates, which is unnecessary.

  7. Ugh can't seem to get it working. Here is my complete code:

    .menu-twitter {
    text-indent:-9999px;
    margin-left:100px;
    width:50px;
    }

    .menu-twitter a {
    background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png') no-repeat;
    }

    any suggestions?

  8. Yes! You're really close!

    if I were you, I'd upload an image that fits that size element, first - it'll be easier than forcing the image to fit the element.

    You will need to make this !important, so that it overrides all the #nav a stuff.

    To do so:

    .menu-twitter a {background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png') no-repeat!important;}

    If you don't resize the image first, you'll soon see why I suggest you do resize.

  9. here is what I have so far:

    .menu-twitter {
    text-indent:-9999px;
    margin-left:100px;
    width:50px;
    }

    .menu-twitter a {
    background-image:url('http://brolicbeats.files.wordpress.com/2012/10/1349920843_099375-twitter-logo-square.png') no-repeat!important;
    }

    Still no luck. Am I using the wrong url for the picture or maybe calling it wrong? Because I have yet to see an actual image of any kind, just the black, empty menu box. Hmm. Really appreciate all your help btw!

  10. When I look at your code, I don't see anything inside the curly braces for menu-twitter a - you should have your background: url selector in there.

  11. It is inside the brackets but the spacing is just off because of the way I pasted it in the comment.

  12. Sorry, we're having a disconnect. Up above, that code looks fine. When I look inside your code on your actual page, I'm not seeing anything inside the curly braces - it shows me this:

    .menu-twitter a {
    }

    I would guess that you didn't save the edit? Would you try again and see if it makes a difference?

    I should add, you're doing a great job working on this bit of CSS - styling menus can be a little tricky.

  13. Hmm that's odd because it shows up in my CSS. I'm using the CSS built within wordpress if that gives you any more information. I was reading up on other posts that said certain themes are glitchy with certain CSS so I don't know if that's the case. It's just frustrating because I feel like I am so close! lol

  14. Totally, I understand.
    I don't know a good answer for you at this point, honestly. This is starting to feel like an issue that Staff would probably be better able to help you with.

    I'm still able to add the background image to your code (because I'm still not seeing it), and the icon shows up...so you really are very close. I'm sorry that's not more helpful!

  15. I checked http://brolicbeats.net/ and I don't see any HTML elements with a class name of "menu-twitter" so I think you may have the wrong selector or you've recently changed something on your site and that selector is no longer there.

    The first thing we have to do is figure out exactly what text you're going to replace with an image. If you'd like to replace a menu item, first you need to add a custom menu item with a link using the Appearance → Menus page. Each menu item gets a unique class, so you need to look it up in the page source code after the item has been added.

    Here is an example using the "Supplements/Nutrition" menu item from your current setup (which has a class of "menu-item-2701"):

    #nav .menu-item-2701 a {
    	background-image: url('http://brolicbeats.files.wordpress.com/2012/10/1349923373_social_twitter_box_blue.png?w=32');
    	background-repeat:no-repeat;
    	height: 32px;
    	width:32px;
    	border: none;
    	text-alignment: left;
    	text-indent:-9999px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic