Changing font colour of individual menu headings

[CMonique]

Hi people!

Is it possible to change the colour of the font in the menu so that each menu item (just the heading, not the drop down) is a different colour?

If so, what is the code I would need to put into the css to make this happen?

http://getyourswaggaback.com

Thank you!

[Paulie_D]

There are a few ways.

The simplest is to assign a class to each top level list item.

As these already exist for you; **’menu-item-26’** etc, you can just do something like

.menu-item-26 {
color: pick a color;
}

.menu-item-27 {
color: pick another color;
}

etc.

[CMonique]

#access ul {
float:left;
padding:0;
margin:0;
list-style:none;
font-size:21px;
font-weight:600;
text-transform:uppercase;
}

This is the current code for that section, well that’s where I changed the font size and it worked.

[Paulie_D]

Putting font styles in that section will change them for **everything** in your menu…and that’s not what you wanted.

[CMonique]

Hey Paulie,

Thanks for replying, this is the only place I found menu-item within the css

#access a:hover,
#access li.current_page_item > a,
#access li.current-menu-item > a {
background:#000;
color:#fff;
text-decoration:none;
}

Should I add the relevant numbers within this section? How will I assign numbers to the relevant heading?

Thank you

[Paulie_D]

You probably won’t find the suggested code in the existing CSS.

You’ll have to add it yourself.

[CMonique]

Ok, I tried to add what you suggested from menu-item-1 but it didn’t do anything. Do I need to add anything to the main index page php for it to pick it up?

[Paulie_D]

Your top level menu items all have specific numbers….you can see them in the HTML in Web Inspector.

Have you gone through and added classes for all of them?

If you have then you might try commenting out (not deleting)

#access a {
color: #ffffff;
}

and seeing what happens.

[CMonique]

Oh I’m sorry, I’ve never used Web Inspector. Is that a program I have to download or something I can do online?

[CMonique]

Ok, I found all the menu item numbers and added them into the css. Hasn’t done anything. The code that you just put above do I need to include that for it to work?

[CMonique]

#access a:hover,
#access li.current_page_item > a,
#access li.current-menu-item > a {
colour:#fff
background:#000;
text-decoration:none;
}

.menu-item-25 {
font-colour:#fff
}

.menu-item-27 {
font-color:#154AEB;
}

.menu-item-26 {
font-colour:#15EB79;
}

.menu-item-40 {
font-colour:#15EB79;
}

.menu-item-39 {
font-colour:#15EB79;
}

.menu-item-35 {
font-colour:#15EB79;
}

.menu-item-36 {
font-colour:#15EB79;
}

.menu-item-23 {
font-colour:#15EB79;
}

[dfogge]

@CMonique, web inspector is part of chrome’s developer tools. using it is an essential component of a web designer/developer’s workflow.

check out this introduction here: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/faster-htmlcss-workflow-with-chrome-developer-tools/

[CMonique]

@dfogge, thank you, I don’t use google chrome.

I have found the correct menu item numbers though, can you please look at this code and tell me where I’m going wrong?

#access a:hover,
#access li.current_page_item > a,
#access li.current-menu-item > a {
colour:#fff;
background:#000;
text-decoration:none;
}

.menu-item-25 {
colour:#fff
}

.menu-item-27 {
color:#154AEB;
}

.menu-item-26 {
colour:#15EB79;
}

.menu-item-40 {
colour:#15EB79;
}

.menu-item-39 {
colour:#15EB79;
}

.menu-item-35 {
colour:#15EB79;
}

.menu-item-36 {
colour:#15EB79;
}

.menu-item-23 {
colour:#15EB79;
}

Thank you

[dfogge]

you really should use chrome.

i think the problem is you’re using the uk spelling of color in your code. try taking out the u’s. ;)

[Paulie_D]

Yeah…when I say Web Inspector, I really mean the developer tools that are built into most browsers.

In Chrome / Safari, you can just ‘right-click’ and ‘inspect element’.

In IE just hit F12.

In Firefox, I think you have to install the Firebug extension ( I know I did) . If there are native tools in FF, they are probably along the same lines.

Oh…and definitely use Chrome as your default browser*.

*fanboi

[Author]

Posts