How to Change the Color of Navigation Bar / MenuBar

Hi,

Please use the following in Theme Options -> Custom CSS
It will change the menu item (word) color to red and background to yellow when you hover over it.
Use this code as a guide to achieve your own hover effect.

#nav ul li a:hover{
color:red !important;
background:yellow !important;
}

Thanks!

Oh man you Rock!!! last question tho if you don’t mind. I seem that in some websites this navigation color change also applies to the sub articles under that menu, will this code also extend that to any sub article or sub option under the menu? please your thoughts and thank you again in advance.

Hi,

Almost the same codes, but add another ul li

#nav ul li ul li a:hover{
color:red !important;
background:yellow !important;
}

Thanks!

Denzel, I am actually trying to change the color of other font but will look for that next. This caught my eye because changing the nav bar color was next on my list. I tried putting exactly the code above in the Custom CSS and absolutely nothing happened.

Website is at https://www.marlissmelton.com
Thanks!
(And if you can tell me for my next question if there is a thread for changing the font color of the “Read Me” text under the Frontpage Content Boxes, I would appreciate that, too. I’ll keep looking.)

Hi,

Please remove any existing custom css that does not work, it can affect other styles.

Please use the following in your Theme Options -> Custom CSS

#nav ul li a:hover{
color:red !important;
background:yellow !important;
}
#nav ul li ul li a:hover{
color:red !important;
background:yellow !important;
}

I tried while viewing your site in firebug, the above solution works.
Please see screenshot. https://prntscr.com/855e0p

As for changing content box read me button font color.

.home-content-boxes .read-more {
    color: yellow !important;
}

https://prntscr.com/855esg

You only need to change the words yellow, and red to any color hex code that you need. https://www.w3schools.com/html/html_colors.asp

Thanks!

Thanks Denzel. I stupidly thought the nav code above was for changing the nav when regular, not on hover. So when I tried it before, I just didn’t see the nav entries change because I wasn’t hovering over them.

I’ve got it now. Also, I had figured the read-more code from the forum here, but thank you. There is so much great info here. Lovely theme.
Thanks.

Denzel,

You rock man…Sorry for the delay work has been really busy

Thanks

I recently lost my Menu colors in Evolve (after an update on 29 April 2016.) I need help in changing the page menu colors: the fonts are very light brown or gray on a light background. When I put my mouse over a page, the font turns white and is almost invisible. I’m trying to get a fix through the theme author, but discovered Denzel’s instructions on Theme Options -> Custom CSS. Will this mess up my Evolve theme? I have a child theme. Would I edit the Child theme?

Getalife,
I’m having the exact same issue you are. The evolve theme update from 3.0.5 to 3.0.6 hosed my menu colors. I tried creating a child theme and using the custom CSS above, it didn’t work for me. Any ideas?

Thanks in advance.

Hi KnightWolfJK,

Please open a new thread, if you need help.
You will need to post your website URL as well as details of the help you need.

Thank you

Thank you, Denzel Chia! I have been looking for this information ALL DAY! Right when I was going to throw in the towel, I found this forum!

Hi @recf2f,

You are welcome! Glad you find it useful.