Change the color of navigation menu page links

This thread explains one way to do that.

https://www.ads-software.com/support/topic/different-menu-background-color-for-each-tab?replies=11

ok, i found

#access .menu, {
  border: none;
}

and underneath below a list of things this

serif;
		text-transform: uppercase;
		letter-spacing: .1em;
	}
	.meta-prep, .meta-sep, .entry-utility-prep {
		text-transform: lowercase;
		color: #a0a0a0;
		font-size: 90%;
		letter-spacing: normal;
	}

How do I assign either the text or the links to certain colors?

You need to look at the menu code — and find the classes or page id’s that are unique to each page. Then you create separate CSS code for each menu tab to set a color for each one.

Ignore the previous post. Great. The link was pretty good. I now know I have to add a CSS class.

so

.about{
color:FF6666 }

it didn’t change the color of the link. It’s still grey. Is there some kind of CSS thing I have to write to tell it to tell the color of the text or the link to be something else? Thanks very much for the help!

That’s not the correct form for color — it has to have a hash tag for hex codes and semi-colon at the end of every style line.

.about {
color: #FF6666;
}

dangit, I don’t see why it’s not working. I fixed the way I wrote the CSS I’m using a child theme. nothing could be canceling it out. Any more possibilities/guesses off the top of your head that I could be doing wrong?

Without seeing the site, it’s impossible to even guess. Are you using Firebug to look at the CSS live?

my bad. lifesfables.com. i’m opening firefox for firebug right now.

interesting. it’s my style.css file, but it’s the same thing.

I would try using the ID’s like this:

#menu-item-152 {
color: #xxxxxx;
}

Or maybe also include the a tag in there:

#menu-item-152 a …

Yes, looking at the existing code “#access a” — that’s what is setting the color now…

so,
I made new IDs. Ex. menu-item-1. When i assigned the CSS class do I have to write #menu-item-1 or just #menu-item-1?

Also,
after your example

#menu-item-152 a …

by tag do you mean the same thing and also write an a after it and before the changes in the CSS?

Edit: hmm…I added a combo of each one to test. Uh, is it possible i’m misinterpreting what you told me about the ‘a’ thing?

The ID’s come from the categories or pages — they are not classes. Try this:

#menu-item-152 a {
color: red;
}

oooOOOOooooo. interesting.

how did you find out my menu item was 152 (where on firebug can I do this?). I tried hovering over the different categories on categories, and the numbers I found and then tried did not do anything (and they were in the teens). Apparently there is a 152 somewhere, and probably a 153 or 154 or 152. but where….

You use “inspect element” — then it shows a section at the bottom of the browser window – -that shows html code on the left and the CSS code on the right side…REALLY useful.

The numbers are:
Fashion 190
Beauty 147
DIY 82
Food 83
Other 84
Contact 156