Hidden Scroll Navigation & Horizontal Sub Menu

[kawindsor]

HI I’m a bit new to all this,

I’m just working on a new site and have a couple of issues with my navigation.

1. I want my navigation to disappear as I scroll down and re-appear when I scroll up. I’ve been able to achieve this with help from a previous post, except I want the navigation to return to the original navigation once I scroll all the way to the top. I assume there is some java code that needs to be added but not sure what to add.

2. I’ve tried to place my sub-menu in a horizontal bar rather than vertical except now it won’t collapse back, and is active constantly.

Appreciate the help

My website is
http://35.201.4.103/

[marc_a]

Hi Kelvin,

Thanks for reaching out.

1.) When I check your website, I can see that you already achieved your goal because when I tried to scroll down the menu disappear and when I scroll up the menu appear again on its original navigation.

2.) The reason why your sub-menu always display is because you added a CSS code:

.masthead-inline .x-navbar .desktop .sub-menu {
    margin: 70px -300px;
    display: -webkit-flex; 
}

I need you to update your code to this:

.masthead-inline .x-navbar .desktop .sub-menu {
        margin: 70px -300px;
 }

And to horizontally align the submenu, please add this code to Pro > Theme Options > CSS

.masthead-inline .x-navbar .desktop .sub-menu li {
       display: inline-block;
}

Please note that provding custom CSS is outside the scope of our support. Issues that might arise from the use of custom CSS and further enhancements should be directed to a third party developer.

Hope that helps.

Thank you.

[kawindsor]

Thanks @cramaton

That works great for Q2. I knew I was missing something. Thanks

With Q1 - I want to try and get the original nav bar to appear, only when I return to the top of the page

I assume I need to hide my second nav-bar at a certain point in the scroll, just unsure how to achieve that.

When I return to the top of the page I want the nav bar to look like this

[marc_a]

Hi Kelvin,

To better help you with your concern, we need to check your backe-end setup. To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[ruenel]

Hey Kelvin,

@kawindsor

I want my navigation to disappear as I scroll down and re-appear when I scroll up. I’ve been able to achieve this with help from a previous post, except I want the navigation to return to the original navigation once I scroll all the way to the top. I assume there is some java code that needs to be added but not sure what to add.

We can see that you have added this custom JS code:

jQuery(document).ready(function() {
  count = 0;
});

function isScrolledIntoView(elem)
{
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top + 100;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

jQuery(window).scroll(function(){
	var isElementInView = isScrolledIntoView(jQuery('.x-counter'));
	if (isElementInView) {
		if (count == 0) {
      setTimeout(function() {
			jQuery('.x-counter').each(function(){
				var theNumber =  jQuery(this).find(".x-counter-number").text();
				theNumber = theNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				jQuery(this).find(".x-counter-number").text(theNumber)
			});
		  count++;
      }, 2000);
		}
	} else {
		console.log('out of view');
	}
});

jQuery(document).ready(function() {
  setTimeout(function() {
			jQuery('.x-counter').each(function(){
				var theNumber =  jQuery(this).find(".x-counter-number").text();
				theNumber = theNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				jQuery(this).find(".x-counter-number").text(theNumber)
			});
      }, 2000);
});


jQuery( function($) {
	// Hide Header on on scroll down
	var didScroll;
	var lastScrollTop = 450;
	var delta         = 5;
	var header        = $(".x-navbar");
	var navbarHeight  = header.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
	        header.removeClass('nav-down').addClass('nav-up');
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
	            header.removeClass('nav-up').addClass('nav-down');
	        }
	    }
	    
	    lastScrollTop = st;
	}	
});

Please be advised that custom coding is beyond the scope of our support. We highly recommend that you seek further assistance from the creator of the code above. If you are unfamiliar with the code and resolving potential conflicts, you may need to contact 3rd party developer. We are unable to provide support for customizations under our Support Policy.

Thank you for your understanding.

[kawindsor]

Hi @ruenel,

Thanks heaps for your help. I got the JS code for scrolling up from your forum here

This is the JS code that I copied from the forum

jQuery( function($) {
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta         = 5;
var header        = $(".x-navbar");
var navbarHeight  = header.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
        header.removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            header.removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}});

[christian]

Hey Kelvin,

Please remove the JS code if it’s not working or causing an issue. The custom codes we provide here serve only as a guide. We do not provide support for them nor any custom codes.

If you wish to continue using the custom code, please consult with a developer so he could fix or tweak it for your project.

Thank you for understanding.