[Support request] how to change mobile menu background color?

[Rafał]

/* rounded widgets */

.separate-containers .inside-article, .sidebar .widget {
border-radius: 10px;
}

/* sticky menu white bg */
.main-navigation.navigation-stick,
.main-navigation.navigation-stick ul ul {
background-color: #fff;
}

.main-navigation.navigation-stick .main-nav ul li a,
.navigation-stick .menu-toggle {
color: #000;
}

.main-navigation.navigation-stick .main-nav ul li:hover>a,
.main-navigation.navigation-stick .main-nav ul li:focus>a,
.main-navigation.navigation-stick .main-nav ul li.sfHover>a,
.main-navigation.navigation-stick .main-nav ul li[class*=”current-menu-“]>a {
background-color: #fff;
color: #9147ff;
}

/* underline menu */

.main-navigation li a:after {
opacity: 0;
transition: opacity 500ms ease-in-out;
content: “”;
}

.main-navigation .main-nav ul li[class*=”current-menu-“] > a:after,
.main-navigation .main-nav ul li:hover > a:after,
.main-navigation .main-nav ul li.sfHover:hover > a:after {
content: “”;
display: block;
width: 100%;
border-bottom: 1px solid #fff;
position: relative;
top: -15px;
opacity: 1;
}

/* underline sticky menu */
.main-navigation.navigation-stick li a:after {
opacity: 0;
transition: opacity 500ms ease-in-out;
content: “”;
}

.main-navigation.navigation-stick .main-nav ul li[class*=”current-menu-“] > a:after,
.main-navigation.navigation-stick .main-nav ul li:hover > a:after,
.main-navigation.navigation-stick .main-nav ul li.sfHover:hover > a:after {
content: “”;
display: block;
width: 100%;
border-bottom: 1px solid #9147ff;
position: relative;
top: -15px;
opacity: 1;
}

This is my CSS

my normal menu looks like that – https://imgur.com/yjt6GDA
my sticky menu looks like that -https://imgur.com/owY6Xlx

(underline is on the hover and current for sticky)

IDK how to solve mobile menu – https://imgur.com/qHjAAYX

Looks like canvas do not work

[David]

Hi there,

do you want the Mobile Header and the Mobile Menu Drop down to have a solid color ?

[Rafał]

only mobile menu drop down I think

my “normal menu” and “my sticky menu” from first post looks fine for me

I have issue only with dropdown on mobile

[David]

You can use this CSS to do that:

@media (max-width: 768px) {
  .has-inline-mobile-toggle #site-navigation.toggled {
      background-color: #f00 !important;
  }
}

[Rafał]

awesome

[David]

Glad to be of help

[Author]

Posts