Archived topic

Adjust sticky logo so as not to vanish on scroll

3 replies · Started by Nimie on November 20, 2018

Viewing posts 1–4 of 4

November 20, 2018 at 11:44 am #732583

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;
}
}

November 20, 2018 at 3:49 pm #732769

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;
    }
}

November 21, 2018 at 4:28 am #733190

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

November 21, 2018 at 9:23 am #733578

Thanks! You too :)

This archived topic is closed to new replies.

Start building better websites today.