Transparent header on mobile

Hey Mike,

you helped me the other day with some CSS for a transparent header on mobile:

I’m still working on it, but I discovered that the code I had found elsewhere on the forum isn’t playing nicely with pages that don’t have a transparent header – it makes the header cover parts of the page, in this case the breadcrumbs.

This is the code that is the problem, but without it the transparent header doesn’t seem to work:

@media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header { 
        position: absolute;
}}

So the code I use currently is:

@media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header { 
        position: absolute;
}}

@media only screen and (max-width: 768px) {
#top #wrap_all .av_header_transparency {
	background: transparent;
}}

@media only screen and (max-width: 768px) { 
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg {
    opacity: 0;
}

.responsive #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block;
}
}

But it needs a tweak to not wreck pages without a transparent header. See private for an example – homepage transparent, other pages not but hiding the breadcrumb bar due to this issue.

Can you supply some updated CSS please? (even better would be to have proper transparent header on mobile support in the theme options…)

Thanks

Tim