Daniel asked how to change mobile menu colors based on the current page. I accidentally edited his post sry
Armin
-
Mobile Menu Color based on current project/page
-
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; }
-
@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 ;)
-
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 -
that would be awesome ;)