Thanks for the great theme.

I would like to have icons in my primary menus and I'm trying to figure out how to do this. For example, instead of a menu tab that says "twitter (title: our twitter feed)" I'd like to have the ubiquitos "T" icon, ideally with no other text.

I have a facsimile of what I'm trying to do simply by putting the icons/links in a block but that's not quite the look I want.

So, I have the menu id # and css in local css as follows: 

li.menu-8502 a {
	background: transparent url(images/twitter1.png) no-repeat left center;
	padding-left: 15px;
	display: block;
}

I guess my questions are: 1. am I on the right track? 2. Any suggestions on how to best accomplish this?
Thanks so much for any advice - I'm a wee tot when it comes to css and theming but I am learning.

CommentFileSizeAuthor
#4 menu-sample.png7.4 KBToddv

Comments

jeremycaldwell’s picture

jeremycaldwell commented

Looks like you are on the right track for this. If you want to hide the text from the menu items then you can do something like this:

#primary-menu ul li {
  text-indent: -9000px;
}
Toddv’s picture

Toddv commented

Thanks for the reply. I am getting closer but still need some coaching.

With my css I know I am targeting the correct menu item because the css provided above in #1 does remove the text in the targeted menu item.

But my 25px x 25px menu icon is not appearing, rather the menu item is still getting styled like the adjacent primary menu items.

My pertinent css is

#primary-menu li.t {
	text-indent:  -9000px;
	background-image: url(images/twitter1.png);
        padding-left: 25px;
        background-color: transparent;
}

(using module "menu-css-names" to provide easily found menu id's; the name of this menu is simply "T"). I checked to make sure I had not done the bonehead move of not putting the twitter1.png file up, but it is there and the path is correct.

Advice appreciated - Thanks!

jeremycaldwell’s picture

jeremycaldwell commented

Hi Toddv, are you trying to add an image to your primary menu item, like use the green tab yet overlay a Twitter icon on top of one of the menu items? Or are you wanting to completely change that specific primary menu item? If you have a mockup of how it should look I can steer you in the right direction.

Toddv’s picture

Toddv commented
StatusFileSize
new menu-sample.png7.4 KB

Hello - thanks so much for your help, really appreciate it.

What I am trying to do is add an image to a primary menu item so that instead of the text on the green or grey tab the Twitter icon (for example) appears.

Or, put another way, generically speaking, it would be as if on this Drupal page, on the upper-right contact link there was an icon, perhaps of a telephone, instead of the word "contact".

I'm getting close and might, or might not, stumble across the solution but as in many things css some mentoring would be helpful.

The attached is what I'm trying to achieve, other than tuning the colors and rounded edges.

Again, thank you,
Todd V.

jeremycaldwell’s picture

jeremycaldwell commented

Hi Toddv, this bit of CSS should do the trick:

#primary-menu ul.menu li.t {
  background: none;
}

#primary-menu ul.menu li.t a {
  background: url(../images/icon-twitter.png) no-repeat top left;
  display: block;
  text-indent: -9000px;
  width: 22px;
}

The image in that CSS is named "icon-twitter.png" so you can change that if needed. Hope that helps!

Toddv’s picture

Toddv commented
Status: Active » Fixed

Nice! Works like a champ. Also, I see how that works, I was not targeting the css properly. I really appreciate the help - thanks!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.