Default Socket Background Color in Header/top bar when on tablet?!?

Hey JeffBianchi,

1) The smaller screen size triggers the mobile menu which fades in between 989px and 768px. The mobile menu uses a different background color than the standard (desktop) menu.

2) Add this code to the quick css field (Enfold > Theme Options > ) to change the background color of the mobile menu:

@media only screen and (max-width: 989px) and (min-width: 768px){
.responsive #top .header_bg {
    background-color: #fff;
}
}

If you want to use the background color of the main content you can set the color value to #94b8b8.

@media only screen and (max-width: 989px) and (min-width: 768px){
.responsive #top .header_bg {
    background-color: #94b8b8;
}
}

However in this case I’d recommend to change the color of the mobile menu icon to white or another color, otherwise the color of this icon equals the background color and your website visitors won’t see the icon. You can use following code to change the icon color:

#top .header_color .av-hamburger-inner, #top .header_color .av-hamburger-inner::before, #top .header_color .av-hamburger-inner::after {
    background-color: #fff;
}

Best regards,
Dude