Jump to content
Sign in to follow this  
compartmentlife

Making each menu item a different color?

Recommended Posts

compartmentlife

site: [url=http://www.compartmentlife.com] I would like to make each word in the menu a different color so I can essentially "color code" my categories. I know how to change the color of all the text, but not each item separately. I attempted trying to figure out how to call out "menu-item-17" and set a color, but I couldn't get it to work.

Share this post


Link to post
Share on other sites
cmunns

You were on the right track, but you'd have to apply a . before it e.g. for a black background on this one... ` #primary-nav ul li.menu-item-17 { background:#000000; } `

Share this post


Link to post
Share on other sites
compartmentlife

Thanks! That is very close, but I want the text color to change, not the background... This however, does not work:

#primary-nav ul li.menu-item-17 {
	color:#3366ff;
	}
Then, if I want to get more complicated, can I have the background INVERT the colors on HOVER like this?
	#primary-nav .main-nav li.menuitem-17 a:hover { color: #FFFFFF; background: #3366ff; }

Neither seems to work for me...

Share this post


Link to post
Share on other sites
cmlstudios

I think you'll need to designate the a element: #primary-nav ul li.menu-item-17 a { color:#3366ff; } But I might be missing the syntax there.

Share this post


Link to post
Share on other sites
compartmentlife

Thanks Chris, that worked... But the hover still isn't working and the

a:hover

is designated. Any ideas?

Share this post


Link to post
Share on other sites
compartmentlife

I should note that it works if I don't designate (ie: leave out) the "menu item", but rather the entire menu.

Share this post


Link to post
Share on other sites
catrina

Hi Matt, Hm, a:hover should work. Try pasting the following code into the base.css file (Appearance > Editor) for the Platform Child Theme (rather than adding it to the custom code box):

#primary-nav ul li.menu-item-17 a:hover {
	color:#3366ff;
	}

It's pretty much the same code but maybe the placement will make a difference.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
compartmentlife

I have tried using that code in the Custom Code box and it doesn't work. I have not yet tried your solution of editing the actual file. I'd rather keep all of my custom code in one location for ease of editing in the future, but I'll try it I suppose. Any other ideas in the mean time? Should I be placing the Hover color before or after normal Nav Text color? Does it matter?

Share this post


Link to post
Share on other sites
compartmentlife

Alright. Got it to work. For some reason I cut and pasted the elements separately and it started working... I'm getting closer to my goal!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×