Change Header Background On Scroll

Hey accurIT,
Try this css at the bottom of your custom css:

#header.header_color.av_header_transparency #header_main {
    background-color: rgba(232, 188, 84, 0.5)!important; 
}
.page-id-85 #header_main {
    background-color: #fff !important; 
}

The idea is that the top part of the code has a stronger value when the page is not scrolled, and the bottom part of the code does when the page is scrolled. Please try to remove your original colored custom code and Please clear any cache plugin and your browser cache.

Best regards,
Mike

Hi,
Try this instead:

@media only screen and (max-width: 767px) { 
#header.header_color.av_header_transparency #header_main {
    background-color: #fff)!important;
}}
@media only screen and (min-width: 768px) { 
#header.header_color.av_header_transparency #header_main {
    background-color: rgba(232, 188, 84, 0.5)!important; 
}
.page-id-85 #header_main {
    background-color: #fff !important; 
}}

Best regards,
Mike