Single Menu Item Color

[hwolfe]

Hi, guys!

I figured out how to get the background for a single link in the menu to change using this:

li#menu-item-228 a {background: rgba(225,225,225,.5);}

but how do I get the text and hover text to change?

Thanks!

[jade]

Hi there,

Please try:

li#menu-item-228 a:hover {background: rgba(225,225,225,.5);}

Hope this helps.

[hwolfe]

Hi, yes, thank you - that is awesome for the background, but what do I use to change the text?

[Prasant]

Hello @hwolfe,

Thanks for updating the thread.

Please update the code with following:

li#menu-item-228 a:hover {color: #000;}  
li#menu-item-228 a {color: #ddd;}  

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[hwolfe]

@Prasant

li#menu-item-228 a:hover {color: #000;}
li#menu-item-228 a {color: #ddd;}

Unfortunately, that did not work.

[nico]

Hi @hwolfe,

Please try this code below:

li .menu-item-228 a:hover {color: #000;}  
li .menu-item-228 a {color: #ddd;} 

Let us know how it goes.

Thanks.