Custom Menu Color (for different pages)

[Hayo Gebauer]

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

[arminunruh]

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:

[Hayo Gebauer]

it works! thank you!

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

[arminunruh]

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

[Hayo Gebauer]

thanks man

[Hayo Gebauer]

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

[arminunruh]

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:

[Hayo Gebauer]

is the same thing also possible for the mobile menu?

[arminunruh]

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.

[arminunruh]

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

[maxkuwertz]

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! !

[arminunruh]

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

[Hayo Gebauer]

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...

[maxkuwertz]

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…

[arminunruh]

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;
}

[Hayo Gebauer]

cool, thank you!
I'll try it out

[Hayo Gebauer]

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

[arminunruh]

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

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

[anagase]

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!!