Changing Header Menu Color

[brockburwell]

I am curious how to change the menu color on separate pages. On my homepage, I’d like the menu color to be white as the background is dark and on other pages, I want it to be black as the background is white. Any suggestions on how to do this? Thanks!

http://dallas170.arvixeshared.com/~bburwell/mydummydomain.com/

[jade]

Hi there,

You can make use of the Body Class option for the page for this.

For example, add light-page to the body class of the light pages and dark-page to the dark pages.

Then add this code in the custom CSS:

.light-page .masthead {
    background-color: #fff;
}

.light-page .masthead .x-navbar .desktop .x-nav > li > a {
    color: #000;
}

.dark-page .masthead {
    background-color: #000;
}

.dark-page .masthead .x-navbar .desktop .x-nav > li > a {
    color: #fff;
}

Hope this helps.

[brockburwell]

Awesome! Thanks!

One quick question, when doing that the color of the font inside the button on the top left changed. How do I change either the button color or font for each page?

[paul.r]

Hi,

To change color and background of your button, please add this code as well.

.light-page .masthead .x-navbar .desktop .x-nav > li.menu-item-173 > a {
    background:#fff;
    color: #000;
}


.dark-page .masthead .x-navbar .desktop .x-nav > li.menu-item-173 > a {
    background:#fff;
    color: #fff;
}

Hope that helps.