Docs

[mhooijer]

Hi there,

I was wondering which menu is used in the “The Grid” demo’s

Lisboa

Kind regards,
Justin

[Nabeel A]

Hey Justin,

Thanks for writing in! Its a custom coded menu. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Take care!

[mhooijer]

This reply has been marked as private.

[Joao]

Hi Justin,

Please add the following code to Appereance > Customizer > Custom > Javascript

jQuery( function($) {
	var didScroll;
	var lastScrollTop = 0;
	var delta = 5;
	var navbarHeight = $('.x-navbar').outerHeight();

	$(window).scroll(function(event){
	    didScroll = true;
	});

	setInterval(function() {
	    if (didScroll) {
	        hasScrolled();
	        didScroll = false;
	    }
	}, 250);

	function hasScrolled() {
	    var st = $(this).scrollTop();
	    
	    // Make sure they scroll more than delta
	    if(Math.abs(lastScrollTop - st) <= delta)
	        return;
	    
	    // If they scrolled down and are past the navbar, add class .nav-up.
	    // This is necessary so you never see what is "behind" the navbar.
	    if (st > lastScrollTop && st > navbarHeight){
	        // Scroll Down
	        $('.x-navbar').removeClass('nav-down').addClass('nav-up');
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
	            $('.x-navbar').removeClass('nav-up').addClass('nav-down');
	        }
	    }

	    if (st == 0) {$('.x-navbar').removeClass('nav-down')};
	    
	    lastScrollTop = st;
	}
});

Please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar {
    transition: all 0.5s ease;
}
.x-navbar.nav-up {
    margin-top: -51px;
}

Replace the 51px with your navbar height

Hope that helps

Joao

[Author]

Posts