mobile menu transparent but when expanded black background

[Stuart]

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

[Bishop]

Maybe try using

@media (max-width: 768px) {
   _CSS_HERE
}

[Tom]

Your mobile menu shouldn’t be transparent by default if GP is making the desktop menu transparent.

Can you link me to your site?

[Stuart]

Hi Tom,

Link to my site is:
http://stuit.com.au

Cheers
Stu

[Tom]

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

[Author]

Posts