responsive: logo im header in vordergrund setzen

Hallo zusammen,

ich habe folgendes Problem,
ich habe ein Logo im header Bereich, oben rechts. Das ist ein balken das auf den Slider/Header Bild übergehen soll. Das befindet sich aber hinter dem Bild. Ich habe schon mit z-index: ausprobiert. Das erscheint dan vorne, aber die seite wird nach unten gescrollt und dann verdeckt der Balken, bilder und Texte! Was kann ich in css ändern?

Hier ist die Code:

@Media only screen and (max-width: 1024px) {
.site-logo {
position: fixed;
max-height: 250px !important;
top: 0px;

} }