Change color of menu font and menu background color

Right now my Menu font is white and when I begin to scroll down the menu background becomes black. I love the effect, but I would prefer to make my menu font black and then have the menu background become white when I scroll down. Is that an option?

Thanks for your help

Hello there,

To achieve such that objective, you’ll need to add the below CSS code to Appearance > Customize > Additional CSS in your site dashboard.


.site-title a, 
.site-title a:hover,
#mainnav .menu > li > a {
  color: #000;
}  

.site-header.float-header {
  background-color: #fff;
}

@media only screen and (max-width: 1024px) {
  
  .site-header {
    background-color: #fff;
  }
  
  .btn-menu {
    color: #000;
  }
  
}

Regards,
Kharis

1 Like

That code definitely turned the menu background white, but the font is still white! I can’t get the font to turn black. What else could I be missing?

Thanks for your help, Kharis!

There was some other CSS code regarding the menu that I had to remove, now it’s enabling me to change the font color. Looks like I got it figured out.

Thanks again!

Is there any way to align the menu text to the left? It’s really far away from the Logo, it would be nice if it could move left more.

Also, how do I change the color of the menu when it’s hovered? Right now, the hover text is red.

One more question… what is the height of the menu? Is it possible for me to change the padding? Or to lessen the height?

There was some other CSS code regarding the menu that I had to remove, now it’s enabling me to change the font color. Looks like I got it figured out.

Great!

Is there any way to align the menu text to the left?

Add this CSS code:


@media only screen and (min-width:1025px) {

  #mainnav {
    float: left;
  }  
  
  .site-header .col-md-4{
    width: 25%;
  }

  .site-header .col-md-8 {
    width: 75%;
  }
 
}

how do I change the color of the menu when it’s hovered?

You can use this CSS code:


#mainnav .menu > li > a:hover {
  color: #fff000;
}  

To reduce the height of the menu bar, use this CSS code:


.site-header {
  padding-top: 10px;
  padding-bottom: 10px;
}

The default value is 20px.

Regards,
Kharis