Docs

[Empoweredmediagroup]

Hey guys —

Just wanted to say you guys have an AWESOME theme and platform. I’m working on a fade in effect for our website’s top nav menu and I’m having trouble getting it to occur at a certain place on the page (approximately 25% down the page, as you scroll past our hero image). Any help on achieving this would be much appreciated. Here is the current CSS we’re using for the fade effect. No Javascript solution we’ve used thus far has worked properly.

.x-navbar{
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:3s;
-moz-animation-duration:3s;
animation-duration:3s;
}
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.masthead {
height:0px;
}

Thanks!

[Empoweredmediagroup]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

What do you mean by to occur in a certain place, would you mind providing more details? You mean menu should only appear on specific scroll position? And it’s probably doable only in javascript since CSS doesn’t have any scroll event.

Thanks!

[Empoweredmediagroup]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the clarification. I can’t access your site upon checking. See attached screenshot. Although we can try the following. Please update above CSS to this:

.x-navbar{
opacity:0; /* make things invisible upon start */
}

.nav-fadeIn{
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:3s;
-moz-animation-duration:3s;
animation-duration:3s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.masthead {
height:0px;
}

Then add the following Javascript on Appearance > Customize > Custom > Edit Global Javascript:

jQuery ( function($) {

$(window).scroll( function() {

if ( $(this).scrollTop() > 300 ) {

$('.x-navbar').addClass( 'nav-fadeIn' );

} else {

$('.x-navbar').removeClass( 'nav-fadeIn' );

}

} );

At certain scroll point, we will add the class that holds the fade in effect. Now feel free to adjust the scroll point which is 300 from above code.

Hope this helps.

[Empoweredmediagroup]

This reply has been marked as private.

[Joao]

Hi There,

Please use this CSS Instead:

.x-navbar {
 display: none;
}

.x-navbar.x-nav-trans {
  display: block !important;
}

And this Javascript instead:

jQuery(document).ready(function($){
	$('.x-navbar').addClass("x-nav-trans");
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

Hope that helps

Joao

[Author]

Posts