[Resolved] Different menu colors

[Matthieu]

Hello, I would like to know if it was possible, for example, to have the white menu bar with black typo on one page and on another page the black bar and white typo. Thanks

[David]

Hi there,

it is possible to do that with CSS or by using a Header Element if your working with a merged header.

Can you share a link to your site where i can see the page your want to change those colors.

[Matthieu]

I do not currently have an example available.

If we assume that my home page has a white background, I would like the menu bar to be white and if my page has about a black background, I would like the menu bar to be black

Is it possible ?

Thanks

[David]

If you want to apply it to specific pages, then the simplest method is to:

1. Install the Simple CSS plugin:

https://en-gb.wordpress.org/plugins/simple-css/

2. Edit the Pages you want to change the nav colors and add this CSS in the Simple CSS meta box:

.main-navigation, .main-navigation ul ul {
    background-color: #000;
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-items {
    color: #fff;
}

/* Set Hover colors */
.main-navigation .main-nav ul li:hover a,
.menu-toggle, .main-navigation .menu-bar-items:hover a {
    color: #f00;
    background-color: #222;
}

[Matthieu]

Perfect, thanks !

[David]

You’re welcome

[Author]

Posts