Transparent logo and header on mobile

Hi guys

I’ve searched high and low .. .and tried some quick CSS from other threads but it creates issues.

Request please
(1) transparent header on mobile – this is the easy bit with quick CSS from previous threads
(2) AND transparent logo (image under enfold …header … transparency) on ,mobile … previous quick CSS creates a problem see below.

(1) The following quick CSS works for transparent header (this is currently set and works fine):
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background-color: transparent;
position: absolute!important;
}}

(2) This is the tricky bit – getting the transparent logo to work on mobile.
I borrowed this from a previous thread … but the code means that the individual content at the top of all the posts/pages are missing:

@media only screen and (max-width: 767px) {

#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }

.responsive #top #wrap_all #header { position: absolute; }}

@media only screen and (max-width: 767px) {

.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {

opacity: 0;

}

.responsive #top .av_header_transparency .logo img.alternate {

display: block;

}}

Really appreciate your help here guys!