Different color menu for each page

cewehner · June 2018

Hi - How can I make the menu on my home page white and keep the menu on the other pages brown?

I am using the transparent layout for my home page and then using the classic for the rest of the website. I achieved this by making a different layout and applying it to the home page.

Here is a screen shot of the home page - I would like the menu to be white: https://pasteboard.co/Hrgqkvuo.jpg

Here is a screen shot of the other pages - I would like the menu to stay brown: https://pasteboard.co/HrgqMoh.jpg

Here is a link to the site: http://kathrynmapes2.wpengine.com/

Thanks!

Pablo · June 2018

Hi,

I see everything like you wanted to be.

Please refresh your web browser cache and try again.

Cheers.

352Digital · June 2018

Hi - i'm trying to do the same thing. I want a light and dark menu so it contrasts with header images depending if they are light and dark.

I understood that i need to use "layouts" and copied my existing layout then changed the logo on it to white. now i have a layout with a white logo but black menu links.

I need your help to give me the CSS required to change the nav menu colour - (just the visible part of it not the entire menu with 2nd and 3rd levels etc)

www.yoake.lu

I asked on themeforest and got the folowing reply:

3. You should be able to catch class name for the body and then according to body class, create right css declaration. For more details about theme customization, please click here.

Can you clarify what this means? I need to give each page with teh white header a class then what? What are the CSS selectors for the menu?

Would this in the custom CSS box on each page with a white menu work?


#Top_bar .menu > li > a span:not(.description) {

color: #ffffff;

}



.menuo-arrows #Top_bar .menu > li.submenu > a > span:not(.description) {

color: #ffffff;

}



#Top_bar .menu > li > a span:not(.description):hover {

color: #fafafa;

}



.menuo-arrows #Top_bar .menu > li.submenu > a > span:not(.description):hover {

color: #fafafa;

}

Pablo · June 2018

Hi @cewehner Try this and tell me if this is what you wanted to achieve.

body #Header #Top_bar span {
  color:brown !important;
}

body #Header #Top_bar .sub-menu span{
  color:inherit !important;
}

body.home #Header #Top_bar span {
  color:white !important;
}

body.home #Header #Top_bar .sub-menu span{
  color:inherit !important;
}

Thanks

352Digital · June 2018

I thinkn you're answering cewehner here not me.

352Digital · June 2018

On this page,

https://www.yoake.lu/fr/partenariats-internationaux/therapie-reflexe-faciale/

I've added this to the custom CSS box on a page and changed the "layout" to one with a white logo and 'Dark" sticky menu:

#Top_bar .menu > li > a span:not(.description) {

color: #ffffff;

}

.menuo-arrows #Top_bar .menu > li.submenu > a > span:not(.description) {

color: #ffffff;

}

#Top_bar .menu > li > a span:not(.description):hover {

color: #fafafa;

}

.menuo-arrows #Top_bar .menu > li.submenu > a > span:not(.description):hover {

color: #fafafa;

}

Is this what you mean i should be doing?

Can this be done without having teh dark sticky menu and only changing the menu colour before I scroll down the page (IE keeping the normal sticky menu and colours?

Bryan · June 2018

352Digital

We want to understand what are you trying to achieve to serve you the best sollution.

Your header currently looks like this:

http://prntscr.com/jzfot8

And this is how it looks on scroll:

http://prntscr.com/jzfpu7

Do you want the current header to stay the same and the sticky to be different? If you want us to help you with custom css please disable the dark sticky style and set "the same ad top left bar".

Please explain in more detail and attach screenshots for better understanding.

thanks

Different color menu for each page

Comments