Custom Menu Color (for different pages)

---

I achieved using different background colors for different projects/pages (using the custom css)

Is it also possible to change the menu font color and the color of the website title for a specific page/project?

THANKS

Hey!

Yeah sure

This CSS is for the color animation:

/* color transitions */
.sitetitle.txt, nav.primary a{
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}

This CSS is for changing the colors for projects/pages/categories individually.
If it's a project:

/*color for site title*/
body[data-id="32"][data-type="project"] .sitetitle.txt{
    color: #f0f;
}
/*for menu*/
body[data-id="32"][data-type="project"] nav.primary a{
}

When it's a Page:

/*color for site title*/
body[data-id="10"][data-type="page"] .sitetitle.txt{
    color: #f0f;
}
/*for menu*/
body[data-id="10"][data-type="page"] nav.primary a{
}

Or if it's a Category:

/*color for site title*/
body[data-id="9"][data-type="category"] .sitetitle.txt{
    color: #f0f;
}
/*for menu*/
body[data-id="9"][data-type="category"] nav.primary a{
}

Replace the data-ids with the id's of your respective projects, pages and categories. :+1:

it works! thank you!

now the only thing i need to make it perfect is the underline in the menu... :P

try the border-bottom-color css
https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color

thanks man

i added this line to the code

border-bottom-color: white;

so it looks like this:

/for menu/
body[data-id="66"][data-type="page"] nav.primary a{
color: white;
border-bottom-color: white;
}

it's not working, any idea what's wrong? sorry, i never got proper education in coding

Try this for an active menu item:

body[data-id="66"][data-type="page"] nav.primary .current-menu-item span {
    border-bottom-color: pink;
}

Or this for all menu items:

body[data-id="66"][data-type="page"] nav.primary a span {
    border-bottom-color: pink;
}

Does that work?

For general info on how to find the selectors please check this: https://developer.chrome.com/devtools
and especially https://developer.chrome.com/devtools#dom-and-styles

A little primer in CSS is useful as well: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

:+1:

is the same thing also possible for the mobile menu?

Well sure. I think with the links I provided to you, you can find out how that works. Your CSS needs to go into the "Custom CSS for Mobile Version" field ^^

I think probably the same CSS works for the mobile version if you just copy paste the CSS into the "Custom CSS for Mobile Version" field.

Hey!
In the latest Lay Theme Version you can set the background color of pages directly in the gridder. No more extra CSS needed. :)

Hey Armin, i tried to use the same code for the mobile version, but it doesn't work… Is there also a way to change the background colour of the navigation for pages/projects in the mobile version? thanks a lot! !

Hey Max! Well I'm gonna do a customization of your Lay Theme version anyway, so you can put that on the todo list.

I also tried modifying the menu/burger for the mobile version. Is there no way I can do it myself?
I tried it but it didn't work...

Hey Armin, I changed my original concept, so that I can do the stuff myself… the only thing left is the bg colour for the mobile version menu…

Ok! I just tried this CSS, it works. Put it into Lay Options -> Misc Options -> Custom CSS for Mobile Version

.navbar {
    background-color: #0f0!important;
    border-bottom: 1px solid #00f!important;
}
nav.primary li a {
    color: #0f0!important;
}
nav.primary li {
    background-color: #f00!important;
    border-bottom: 1px solid #00f!important;
}
nav.primary li.current-menu-item {
    background-color: #00f!important;
}

cool, thank you!
I'll try it out

btw is there also a code that enables the burger color to be different?

.burger span {
    background-color: #000000;
}

Going to make Customizer settings for all of this one day :D

Hi Guys, any idea for doing the same with the site img? I am using an image instead of a text.
I will need to use a different logo color (black or white) for each page or project.
Thanks!!