How to change the color of a specific menu item in Joomla

I don’t seem to run across many Joomla websites with different color menu items. I thought this would be a nice chalenge to figure out how to do it. As it turn out it was actually pretty simple with the extended menu module.

Once you get the module downloaded and installed you need to add some css to to your menus. I will assume that you already have the menus setup and working. Now to add a little css to diferentiate between the different menu items.

  1. #menulink_1-suckerfish-horizontal, a.mainlevel-suckerfish-horizontal
  2. {
  3. background-color: transparent;
  4. background-image: url(../images/first-tab-bg.gif);
  5. background-repeat: no-repeat;
  6. background-attachment: scroll;
  7. background-x-position: left;
  8. background-y-position: top;
  9. }

Also you are going to need to make a change to your menu.ini to add the element_id. It should look something like

  1. active_menu_class=1
  2. class_sfx=-suckerfish-horizontal
  3. expand_menu=1
  4. element_id=1

I don’t currently have an example of the different menu colors, but I do have an example of a different menu shape at rcnovice. If you notice the home menu item has a small curve on the leading edge.

Post to Twitter Tweet This Post