Docs

[Chiweilin]

Hi,

Wondering how to make the header hide at the top of the page (landing picture), and show once drag down passing the landing picture. Here’s the example: http://www.sport-piraten.de/

My URL is http://www.meetmyguide.com

Thank you so much.

[Lely]

Hi There,

Thanks for posting in.
From your homepage content, remove the revolution slider. Then under Page settings >Slider Settings: Above Masthead > Slider Dropdown: select the specific slider. Make sure that this slider is set to Fullscreen. By default it will be displayed before the navigation became fixed on top.

Hope this helps.

[Chiweilin]

Hi Lely,

Thanks for the reply. I have tried it and it’s close to what I want. Is it possible to make it exactly like the example site I provided? The header will come out suddenly when passed my revolution slider, instead of permanently located below my revolution slider. Thank you.

[Joao]

Hi There,

Please select slider type hero scene on your Slider Revolution.

Please see image attached.

Hope that helps,

Joao

[Chiweilin]

Hi Joao,

Thanks for the help. But it’s still the same that header is still located below my revolution slider. Is there any method to make the head disappear until I scroll down over the revolution slider? Like this site: http://www.sport-piraten.de/

Thanks.

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('header.masthead ').hide();
	var rev_height = $(".x-slider-container").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('header.masthead ').show();
		} else {
			$('header.masthead ').hide();
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Chiweilin]

Hi Nabeel,

Thanks for the great help. It works.

However, it still looks a bit stiff as the way the header comes out. Is it possible to make it smoother like animation from top to bottom?

Love X theme support, you guys are awesome!

Wei

[Rupok]

Hi there,

Thanks for updating. I can see there is already .3s transition. If you want to increase this then add this to custom CSS :

#gkHeaderNav {
  transition: all 0.5s ease-out 0s;
}

Hope this helps.

Cheers!

[Author]

Posts