Menu color


Hi everybody,

I need different menu color on the main slider and when you scroll down on the header with a white background color. I noticed when you scroll down class=“site-header” changes to “site-header fixed float-header” but I was unable to make any changes in the color of the menu.

Thanks in advance.



Did you mean the color of the background menu or the color of the font menu?
If you want to change the background color menu, you can use the css code below:

.site-header.float-header {
    background-color: red;

Or here is to change the font color of the menu:

#mainnav ul li a, #mainnav ul li::before {
    color: red;

you can use simple custom css plugin to place the code above or you can also place the code in style.css within your child theme


Thanks for your response.

I would like to change the font color of the menu when I scroll down but when I use this
#mainnav ul li a, #mainnav ul li::before {
color: red;

the font color all over the website turns to Red.

I want to change the font color after the background under the menu apprears.


Oh, so you want the font color of the menu changes when the page is scrolled. please try this:

.site-header.float-header #mainnav ul li a{
    color: red;


I’m trying to achieve the opposite. I want the font color in the menu on the front page to be white. But when I scroll down on the front page and on all other pages I want the font color to be black. I don’t know really what I’m doing wrong but I can’t get it to work properly.

So, white font in menu on the landing page, but black when scroll and black on every all pages.

Thanks in advance!

Best regards, Carl



you just need to change the color on the custom css code in above to black.

.site-header.float-header #mainnav ul li a{
    color: black;

if its still not working, please to post the URL of your site, so I can help you further


Hello and thank you for your answer.

I’ve already tried this. I think you misunderstood me.

Anyways I managed to fix it myself, but I really appreciate your answer!

Thanks again,


Would you please let me know how you managed to fix it?


My goal was to have a white menu on the landing page, on top of the header, and after scroll it should turn black. And I wanted it black on all other sites. By adding your code it made the menu black after I scrolled(and it was already black from the beginning). And if I changed the font color to white in appearance it went white on all pages.

This was my(and partly yours) solution:

.page-id-14 .site-header #mainnav ul li a{
    color: white;

.site-header.float-header #mainnav ul li a{
    color: black;



I would like to have the bagground of my main menu black. How can I change this?

Right now the menu text is white and background is see-through, which workes fine on the first page where there is a big colorful picture (you still see the white text), but on all other pages which has a white background the menu “dissapears”.

Can anyone please help me make the menu background black?

Thx, Maj


Hi Maj,

From your Dashboard go to Appearance -> Customize -> Colors. From there you can change the background of your menu under “Menu background”. :slight_smile:

Best Regards, Lindberg


Great! Thank you. Thought I’d been everywhere, but somehow that one slipped. Thanks for your time, it was a bit help!