By kevin20007 on

Searched but couldn't find...

I have six items in my primary menu, listed across the top of the site.

The site is designed with one function as its feature, so I would like to highlight that tab to make it stand out. The CSS has white text with a blue background for primary menu items, however for the second menu item I would like the text to be red.

I'm very familiar with html, so I know what to say, just now where to say it. I've tried adding tags in the menu editing section, in the text box under "Menu link title: ", however the code just shows up in the actual title of the menu.

Any suggestions? Thanks!

⋅ Categories: Drupal 5.x

Comments

mcfilms’s picture

mcfilms commented

You will need to edit the css in your current theme's style.css file or maybe the menu's css if using a module). Use a tool like Firebug for Firefox to look at your current site and find that menu item's css and the edit it. Firebug will tell you what file and what line number the element's css is in.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

kevin20007’s picture

kevin20007 commented

Thanks for the response.

however, won't that change the entire menu settings? ie make all the words of every menu red? Or am I missing something.

I could try setting up a separate CSS class, but I don't know how to assign the item I want to highlight to that class.

kitsunechan’s picture

kitsunechan commented

I believe Drupal automatically gives each item in the menu a unique id. So, if you always want the second link in the menu to have a certain style, there is an id for that item that you can create a separate style for in your css style sheet. You can view the source of the page in your browser and search for the menu, or use a tool like Firebug for Firefox to find out what that id is. If you have a test site up for us to look at, I could help find it for you too.

kevin20007’s picture

kevin20007 commented

I'm building live, and I just got going yesterday so excuse the mess
http://rategtown.com/

From what I can tell, the first and last menu are different classes, but the one I want to highlight in red, the second one called "Rate! Classes" is called "leaf", which is also the class of several other channels (book exchange, for example).

Thanks for your help.

kitsunechan’s picture

kitsunechan commented

Well, I guess I was wrong and Drupal doesn't automatically give each menu item an id when the menu is added to the template this way. If the menu is a block I think it does though. Or maybe I'm thinking of menus made with the Nice Menus module.

Where did you get that theme? Are you brave enough to want to dive into changing the theme, or do you want to leave it alone?

If you're willing to change it, I have a couple of ideas.

  1. Change the menu area to a block area and using something like the Nice Menus module (http://drupal.org/project/nice_menus). That involves changing the template, installing another module, and more CSS style additions. An added plus of Nice menus is it provides drop-down menu capabilities.
  2. There is a post at http://drupal.org/node/310356 that explains how to add ids to menu items. I haven't tried this though, so I wouldn't be able to help you. Someone else may be able to help you out through the forums like this. This method is simpler and would just involve changing the template.
mcfilms’s picture

mcfilms commented

Like kitsunechan I thought you could target EVERY menu item in CSS. He spelled out the alternatives I would suggest. The only other idea would be a design compromise and move this special menu item to the last position, which you CAN easily target.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com