Archived topic
mobile menu transparent but when expanded black background
4 replies · Started by Stuart on July 20, 2016
Hi
I am trying to set some CSS so that when I expand my menu, the menu items no longer have a transparent background. The id of the menu appears to be "primary-menu" whether it is a mobile menu or not. The CSS below should do the job, it is just how to activate it when I need it to be activated. I hope you can help.
.home .main-navigation:not(.navigation-clone) {
position: absolute;
width: 100%;
background-color: transparent;
}
// This is what I am having trouble with... have put in "#mobile-menu" here which would need to be something else.
#mobile-menu .menu-item {
background-color:black;
border-bottom: 1px solid rgba(0,0,0,.6);
border-top: 1px solid rgba(255,255,255,.2);
}
Cheers
Stu
Maybe try using
@media (max-width: 768px) {
_CSS_HERE
}Your mobile menu shouldn't be transparent by default if GP is making the desktop menu transparent.
Can you link me to your site?
Ah, it looks like you're creating the transparency with custom code instead of using the built in code in the Page Header add-on.
You'll want to adjust your code to this:
@media (min-width: 769px) {
.home .main-navigation:not(.navigation-clone) {
position: absolute;
width: 100%;
background-color: transparent;
}
}