CSS for Navigation (Current and Hover)

[Judy Asman]

Hi, I apologize if someone has already asked this question, can you please tell me how I can change the current and hover text color in the primary navigation? I think I’ve done it before since it does not appear in the Customize section.

For this site, I would like the current and hover text to be white: http://judyasmanfitness.com

I don’t remember which code it is. I thought it was this one but it did not work for me. Thank you!

.site-navigation a:hover,
	.site-navigation .current-menu-item > a {
		color: #ffffff;
	}	
	

[Judy Asman]

Any takers on this one? Thank you!

[Binaya D]

Hi Judy,

Please use the following css to fix your issue:

#primary-navigation a:hover {
    color: rebeccapurple;
}

Thanks

[Judy Asman]

Great! Thanks, Binaya — I notice that this solves the issue for the hover. Can you please tell me what I should use for the active link as well. I tried using focus but it did not work. Thanks again 🙂

[Binaya D]

Hi Judy,

Please use the following css to fix your issue:

.primary-navigation ul.nav-menu a:focus {
	color: rebeccapurple !important;
}

.primary-navigation ul.nav-menu a:active {
	color: red !important;
}

Thanks

[Judy Asman]

Hi, Binaya! Thank you again 🙂 I will give this a try and let you know how it goes. :cheer:

[Binaya D]

Hi Judy,

Sure, we look forward to your respond.

Thanks

[Author]

Posts