How to give a background color for expanded mobile menu

[Tammet]

Hey

My site’s desktop version has a transparent nav. bar. When I made my nav. bar transparent my mobile menu (when expanded) went transparent also. This is a problem for my mobile menu because if its transparent then the links are hard to see (because of the transparency).

So, my question is can you give css code that gives a background for my expanded mobile menu?

I also tried this
@media (min-width: 979px) {
.x-navbar {
background-color:transparent;
}
}
and this:
@media (max-width: 979px) {
.home .x-navbar .x-nav-wrap .x-nav > li > a {
color: red !important;
}
}

css codes but these codes are not helping me. Changing the color of menu links won’t help. So I need full background for mobile menu. Hope You can help.

Best regards
Christopher

[nabeel]

Hi Christopher,

Thank you for reaching out to us. You can give your mobile menu a background color with custom CSS. To do this, please add the following code in the Theme Options > CSS:

@media (max-width: 979px) {
    div.x-navbar-inner:not(.x-collapsed), div.x-navbar-inner .mobile:not(.x-collapsed) {
        background: rgba(0,0,0,0.6) !important;
        padding: 0 20px;
    }
}

Hope this helps!

[Tammet]

It helped. Thank You a lot. Have a good week

[Prasant]

You are most welcome.