Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Adding a CSS icon to menu

  1. brolicbeats
    Member

    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. zandyring
    Happiness Engineer

    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. brolicbeats
    Member

    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. zandyring
    Happiness Engineer

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

  5. brolicbeats
    Member

    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. zandyring
    Happiness Engineer

    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. brolicbeats
    Member

    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. zandyring
    Happiness Engineer

    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. brolicbeats
    Member

    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. zandyring
    Happiness Engineer

    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. brolicbeats
    Member

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

  12. zandyring
    Happiness Engineer

    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. brolicbeats
    Member

    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. zandyring
    Happiness Engineer

    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. designsimply
    Staff

    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

Tags