[Resolved] Adjust sticky logo so as not to vanish on scroll

[Nimie]

I have a logo on the sticky header and added a negative top margin to display it partially over the top bar. Problem is that it disappears above the top bar on the scroll. I need a way for the negative margin to disappear on scroll. I would also like the logo slightly larger on scroll than it normally appears. This is what I hAve:

@media (min-width: 769px){
.main-navigation .sticky-logo {
position: absolute;
top: -55px;
left: 0;
z-index: 100;
}
body .main-navigation .sticky-logo,
body .main-navigation .sticky-logo img {
height: 250px;
}
}

[Tom]

Hi there,

Try adjusting your CSS to this:

@media (min-width: 769px){
    .main-navigation:not(.navigation-stick) .sticky-logo {
        position: absolute;
        top: -55px;
        left: 0;
        z-index: 100;
    }

    body .main-navigation:not(.navigation-stick) .sticky-logo,
    body .main-navigation:not(.navigation-stick) .sticky-logo img {
        height: 250px;
    }
}

[Nimie]

Thanks so much! Worked perfectly. Hope you and your family have a wonderful Thanksgiving.

[Tom]

Thanks! You too 🙂

[Author]

Posts