Hi, I need consultation with multi-color menu. I have 4 links in the menu – only links with no graphics. But I need to link each had a different color. Please advice on what and where to add the default.CSS:

/* > Navigation

---

*/

ul#nav {
margin: 0 0 18px 0;
padding: 0;
position: absolute;
left: 15px;
list-style: none;
font-size: 17px;
bottom: 0;
max-width: 65%;
}
ul#nav li {
float: left;
margin: 0 5px 0 0;
}
ul#nav li a {
display: block;
color: #555;
text-decoration: none;
padding: 5px 15px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
}
ul#nav li.selected a, ul#nav li.current_page_item a {
background: #fff;
color: #555;
}
ul#nav a:focus { outline: none; }

---

Thank you,

[@lorient Member 13 years, 1 month ago]

Hello there,

I had the same problem and I would like to share the solution that I found. Firstly, I use Google Chrome and firebug lite (this helps me to identify the CSS needed to modify the website’s appearance).

1: What you need to do is identify the unique id of the menu items in your menu.

2: Right click on one of the menu items that you’d like to change the background or link colour of. A new menu will open, look for “Inspect element” and then left click on this option. A new inspection menu will open at the bottom half of your screen. This shows you each of your menu item ID’s.

3: Identify the menu item you’d like to change, it should appear something like “menu-item-x” – obviously x here represents the number that shows when you inspect your website, since’s it’s different from website to website.

4: You then need to target this menu id correctly. After playing around with it I found the solution as follows:

li#menu-item-X a {background: #0072C6;}

Obviously in the example above “X” represents the number that you need to substitute in after inspecting the element in Google Chrome. You change the link colour itself, hover colour etc by changing the CSS but along the following lines:

(Link colour change)

li#menu-item-X a {color: #31AFF0;}

(Hover colour change)

li#menu-item-X a:hover {background: #000000;}

I hope this helps, let me know if it works ok for you

[@lorient Member 13 years, 1 month ago]

I should note the above example was done in Google Chrome which is available for download at:

http://www.google.com/chrome/