[Resolved] Sticky logo overlaying on the header logo

[PJ]

Hi there!

My client reached out about an issue where the sticky logo overlays the main logo right before you reach the top scroll. Here is a link to a screenshot: https://photos.app.goo.gl/JnSdWddsE1KTCDSo8

We turned on “hide sticky during scroll” but that has not resolved it. Any thoughts?

Thanks,
Becky Sue

[Ying]

Hi there,

It’s because you have this CSS, thez-index value is just too high for the logo, try to change it to 100.

.inside-header>.site-branding, .inside-header>.navigation-branding, .inside-header>.site-logo, .site-branding-container, #site-navigation .navigation-branding .site-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000;
}

[PJ]

🤦 Thank you

[Ying]

No problem 🙂

[Author]

Posts