How to change font color of menu

Hi @fatema313,

You can use this CSS code to change menu links color of main navigation only in homepage.

.home #mainnav ul li a,
.home #mainnav ul li a:active, 
.home #mainnav ul li a:visited {
    color: #ff0000;
}

.home #mainnav ul li a:hover {
    color: #fff000;
}

Add it to Appearance > Customize > Additional CSS from dashboard if you can access it.

Thanks, I tried it but it changes the font color of the sticky menu too. Is there a way I can change that?

Also, how can I can the font color of the menu on all pages except the front page?

Hi @fatema313,

I tried it but it changes the font color of the sticky menu too. Is there a way I can change that?

Try adding this CSS code to set styles for menu links in sticky menu:

.home .float-header #mainnav ul li a,
.home .float-header #mainnav ul li a:active, 
.home .float-header #mainnav ul li a:visited {
    color: #fff000;
}

.home .float-header #mainnav ul li a:hover {
    color: #6eaa16;
}

how can I can the font color of the menu on all pages except the front page?

You’ll need to exclude ?.home selector. For example:

#mainnav ul li a,
#mainnav ul li a:active, 
#mainnav ul li a:visited {
    color: #ff0000;
}

#mainnav ul li a:hover {
    color: #fff000;
}

Hope this reply helps. Thank you!

I tried it didn’t work. Basically I want the font of all menus (normal + sticky) to be black on all pages except for the homepage in which I want white font for the normal menu and black for the sticky menu. I hope I make sense.

Removing the .home changes all menus, the home page as well.

• This reply was modified 2 years, 2 months ago by fatema313.