How to remove background from header area in responsive mode

Hey,

Thanks for contacting us!

Could you please post a link of your website so we can provide you an accurate solution?

Best regards,
Yigit

Hi Jak,

You are currently using a transparent header on your page which is disabled on mobile by default.
Please add following code to Quick CSS field in Enfold theme options > General Styling tab to display transparent header on mobile

/* Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header { 
        position: absolute;
}
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
	background: transparent;
}
}

Best regards,
Yigit

Hi,

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

#top .header_bg {
  background-color: transparent;
}
/* To remove border from menu items /* 
.av_seperator_big_border .av-main-nav > li > a {
  border: none;
}

Best regards,
Yigit

Hi,
To have a transparent mobile header please use Yigit’s css above:

@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header { 
        position: absolute;
}
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
	background: transparent;
}
}

Now currently on desktop you have a fixed header that is transparent until you scroll, then it is blue, to have that blue transparent add the second css separately:

#top .header_bg {
  background-color: transparent;
}

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