Mobile Menu Color based on current project/page

[dafv]

Daniel asked how to change mobile menu colors based on the current page. I accidentally edited his post sry
Armin

[arminunruh]

Hey! Here is some CSS :D

/*top bar*/
.navbar{
	background-color:rgba(255,255,255,0.5);
	border-bottom-color: green;
}

/*burger icon*/
.burger span, .burger span:before, .burger span:after{
	background-color: pink;
}

/*menu points border*/
nav.primary li a{
	border-bottom-color: yellow;
}

/*menu points text*/
nav.primary a{
	color: aqua;
}

/*menu points background*/
nav.primary li>a{background-color:rgba(255,0,255,0.5)}

/*current menu point*/
nav.primary li.current-menu-item>a{background-color:rgba(0,0,255,0.5)}

Of course you need to put your page specific selector in front of each selector above. So it would be:

body[data-type="page"][data-id="20"] .burger span:before,
body[data-type="page"][data-id="20"] .burger span:after{
   background-color: pink;
}

[dafv]

@arminunruh said:

/menu points text/
nav.primary a{
color: aqua;
}

/menu points background/
nav.primary li>a{background-color:rgba(255,0,255,0.5)}

Thank you so much Armin! My code was a little bit messy...
Could you help me with something else?

I am trying to make the mobile navbar with transparent background (the content starting at 0vh) and when clicking the burger the project titles would appear fullscreen with black background.

I am having some issues with the last part...
Can you help me?

Thanks ;)

[arminunruh]

hey daniel!

Hmm this is not really easily possible :/
But it's a nice idea and I might include more options for mobile menus one day

[dafv]

that would be awesome ;)