Replace sticky logo on scroll

Hi,

My clients logo is quite large, which is fine on the full screen slider image, but then they scroll, with the sticky menu active, it takes up too much room in the top menu bar.

Ideally what I would like is to have two versions of the logo so that by default, we display logo1.jpg and then when we scroll and the menu changes to display logo2.jpg instead.

http://print.rawdemo.co.uk

Can you advise how I can accomplish this please.

Thanks

Rob

Hi,

That’s not an option I’m afraid, not without significant code changes.
But you can simply shrink it with a bit of CSS and add a nice transition to it:


.site-logo {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.float-header .site-logo {
    max-height: 50px;
}

This would go in a custom CSS plugin or child theme.

Hi,

Thank you for your help and I appreciate your advice.

It has given me an idea though.

If I hard code two logos, the first visible and the second hidden, then on scroll/float, hide the first and display the second. A bit of a ‘hack’ but should work I think.

Thanks

Rob

Yeah, you could do that also but make sure you do it in a child theme. It only makes sense if you plan to use a different logo design though and you won’t get the smooth transition from a bigger logo to a smaller one.

Oh! Thank you very much! It is working perfect!