Custom Menu Color (for different pages)

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