Logo and transparancy logo both visible

Hi, I have the following problem. My landing page has a dark image with a white logo and white menu on it. I have defined a dark transparancy logo. Now, if I scroll down, I get a default header and a dark menu; this is ok, However the white logo shrinks and is displayed on top of the transparancy logo which makes the transparancy logo invisible. I would expect that the white logo should disappear. Any help is appreciated to solve this problem.
As I expect that custom css could solve the problem, I have copied my current custom css below.

h4 {
line-height: 2.1em !important;
}

#top .av_header_transparency.av_alternate_logo_active .logo a > img {
opacity: 1 !important;
filter: alpha(opacity=1) !important ;
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.avia-fullscreen-slider .avia-slideshow[data-image_attachment=”fixed”]>ul>li {
background-attachment: scroll;
}
}

@media only screen
and (max-device-width : 1024px) {
.avia-fullscreen-slider .avia-slideshow[data-image_attachment=”fixed”]>ul>li {
background-attachment: scroll;
}
}

#top .header_color input[type=’text’] {
color: black !important;
}

#top .header_color input[type=’text’]::-webkit-input-placeholder {
color: black !important;
}

.avia-content-slider .slide-meta { display: none; }

.tribe-events-cal-links, tribe-events-ical {
display: none !important;
}

.av-single-event-content {
float: left !important;
margin-left: 0px !important;
margin-right: 50px !important;
}