Change Menu Text Color

What is the CSS is change the menu text color and the menu hover text color?

Thank you!

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the menu item color by going to Appearance > Customize > Additional CSS and pasting it there.

/*Menu Item color*/
#primary-menu > ul > li > a, #primary-menu > li > a {
    color: red;
}

#primary-menu > li > a:hover {
    text-decoration: none;
    color: black;
}

Best Regards,
Support

hi,

Thanks for the response!

To clarify my menu items text is white, its just the word menu that is not, see attached file, I have circled the word so you can see what I mean. (you may have to zoom, its hard to see against my background.)

Current code looks like;

/*change color on mobile media query*/
@media screen and (max-width: 768px){
.main-navigation .blaskan-main-menu > ul, .main-navigation .blaskan-main-menu > div {
    background: #000000;
  }
  #primary-menu > li > a,.main-navigation ul ul li a {
    color: #fff;
  }
  .main-navigation ul ul li{
    background-color:#fff;
  }
  
}

/*Font size in menu*/
#primary-menu > li > a {
    font-size: 17px;
    color: #fff;
}

/*Menu font color*/
@media screen and (max-width: 768px)
.main-navigation #primary-menu > ul > li > a, .main-navigation #primary-menu > li > a {
    color: #fff;
}

Hey there,

Thank you for the clarification.

You can use the following CSS to accomplish this.

/*change menu button color*/
button.menu-toggle {
    color: white;
}

Best Regards,
Support

perfect, that fixed it!

Thank you support :slight_smile:

Great,

Happy to help. Let us know if there’s anything else we can help you with.

Best Regards,
Support.