Mobile menu background is transparent

Hey, Unfortunately this is not working. I’ve got a bit of custom css and coding going on, so this may be throwing things off, but I feel like this should be an easy fix that I just can’t figure out.

The header is a menu with the logos being pulled from a widget to display two logos, but for some reason on mobile the entire header background is transparent. I can only seem to apply a background behind the two logos, when it needs to be the entire header as normal.

Thanks

Hi Yigit,

Unfortunately that did not do the trick either. I’ve attempted adding the !important rule to a couple different classes and none of them seem to be affecting the mobile header.

Here is the current CSS I have, hopefully this will give some insight. Any advice is appreciated, however I think one of the issues may be that I have one class set to fixed.

strong.logo.bg-logo {
  display: none!important;
}

strong.logo {
padding: 6px 0 6px 0!important;
margin-left: 30px;
}

#header .widget {
  left: 10%;
  padding-top: 5px;
  position: absolute;
  top: 0;
  transform: translate(-50%);
}

@media only screen and (max-width: 767px) {
#advanced_menu_toggle {
  margin-top: 15px;
}

#header .widget {
  left: 0%;
  transform: translate(0%);
}
}

.html_header_top.html_header_sticky #header {
position: fixed !important;
}
@media only screen and (max-width: 767px) {
.responsive #main {
  padding-top: 82 !important;
}
}

#mobile-advanced {
  background-color: #080808 !important;
}

@media only screen and (max-width: 767px) {
div.header-double-logo {
  height: 50% !important;
}
}

cba.thekangagroup.com/

Sure thing!