Replace Logo on Scroll – Bento Theme

Hello Carsten and thanks for choosing Bento! Technically it’s possible (by using some Javascript to detect scrolling and substitute the logo image for another one), yet right now it’s not among the existing Bento features; we will add this as a potential new feature to our development backlog. Cheers!

Hi, thanks for your reply. Could you give me a hint/direction on the JS code? I have installed custom JS and I am basically familiar with it.
Thanks a lot!!

Unfortunately this is outside the scope of theme support, but here’s a starting point: you can create a function to switch the logo in the html of the page, and trigger it on scroll as well as on page load if the load position is not on top of the page. Something along the lines of

function bentoLogoSwitch() {
	if ( $(window).scrollTop() > 50 ) {
		$('.logo-fullsize').hide(); // hide the existing logo
		$('.logo-image-link').prepend( /*--your-image--*/ );
	}
}

$str(window).load(function () {
	bentoLogoSwitch();
});

$str(window).scroll(function () {
	bentoLogoSwitch();
});