Header background is not displayed as set

Hey Sabine,
Thank you for the link to your site for mobile your header background color is transparent:

@media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency {
        background-color:transparent;
        color: #22666d;
        border-color: #d0e4e3
    }
}

but the background color for the “wrap_all” div is #947d52

.html_stretched #wrap_all {
    background-color: #947d52;
}

which is what you are seeing, you could change the body background color in the theme options or change the header background color in your css from transparent to a color, or you could move the background image up a little with this:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #main {
    margin-top: -80px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #main {
    margin-top: -80px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

This is a very odd issue. The header is not visible but the mobile menu is still clickable. We cannot find any issue with the css and when we tried to increase the z-index value of the header, it didn’t affect the visibility of the mobile menu. Did you apply other css to the header?

Best regards,
Ismael

Hi,
With the above solution, the background image is moved up under the transparent header, the reason you don’t see the burger menu is because it is the same color as the background.
Try this css instead that changes your burger menu to black so you can see it, feel free to adjust the color to suit:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #main {
    margin-top: -80px;
}
#top .av-burger-overlay li li .avia-bullet, #top .av-hamburger-inner,#top .av-hamburger-inner::before, #top .av-hamburger-inner::after {
  background-color: #000 !important; 
  }
}

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike