Hide Logo on Homepage until Scroll

[Kacefont]

Hello, I have the logo at the top left of my website.

However, I want to hide it on my homepage only - and I want it to re-appear after scrolling down the homepage a bit (maybe about 15%?)

This is because I have the logo at the top of my home page already and don’t want it twice.

I’ve searched forums and found similar posts but none of the coding worked on my end.

[nabeel]

Hi Kacie,

Thank you for reaching out to us. You can do this with custom scripting, first edit your home page in Cornerstone and then add the following code in the JS section the page (see screenshot)

jQuery(document).ready(function($){
	$('.home .x-brand').hide();
	var scroll_height = $('header.masthead').outerHeight();
	$(window).scroll(function(){
		if ($(this).scrollTop() > scroll_height) {
			$('.home .x-brand').show();
		}
		else {
			$('.home .x-brand').hide();
		}
	});
});

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Thank you for understanding!

[Kacefont]

Thanks - worked like a charm!

[friech]

We are delighted to assist you with this.

Cheers!