[Paul RModerator]

Hi,

To enable scroll in your mobile menu, you can add this under Custom > Edit Global CSS in the Customizer.

body .x-nav-wrap.mobile .x-nav {
    overflow-y: scroll !important;
    max-height: 480px;
}

Hope that helps

[instadesignParticipant]

Hi Paul,

Thank you, that seems to have worked! However I’m still getting a gap at the top of the page when I start scrolling (see screenshot attached).

Henry

[RupokMember]

Hi there,

Thanks for writing back. It seems you are logged in and that’s happening for the Admin bar because you have the below code on your Child Theme’s CSS :

.admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
  top: 42px !important;
}

So either you can remove this or keep this as is since it won’t affect the site for the real users.

Cheers!

[instadesignParticipant]

Hi Rupok,

Sorry I have been away and just coming back to this. I see that that CSS code was wrong (not sure how I ended up with that!) so I have now removed it and replaced it with this:

  .x-main.full, .x-main.left, .x-main.right {
    top: 68px !important;
  }

That is now serving the purpose I had intended, of pushing down my content so it’s not hidden under the fixed header.

However, this appears to be totally unrelated to the issue I’m having with the scrolling. I am testing the site on an Android phone where I am not logged in. Everything looks good, but as I start scrolling the header stays where it is until I stop scrolling, then it snaps back up to the top of the screen. I wonder if this could be to do with the code I was advised to add:

    .touchevents .x-navbar-fixed-top, .touchevents .x-navbar-fixed-left, .touchevents .x-navbar-fixed-right {
        position: relative !important;
    }

Any ideas?

Thanks,

Henry

[RadModerator]

Hi there,

Yes, it’s the main reason why it stops scrolling. Relative positioning is the reverse of fixed positioning, that CSS simply disable the fixed positioning required for navbar scrolling effect.

Thanks!

[instadesignParticipant]

Rad,

Thanks for your reply, and I’m glad you understand the issue, but I’m no closer to solving it – can you help please?

Thanks,

Henry

[Paul RModerator]

Hi Henry,

You can try adding this in your Custom > Edit Global CSS

body .x-navbar {
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
}

header.masthead {
  overflow:hidden;
    -webkit-overflow-scrolling:touch;
   height:68px;
}

Hope that helps.

[instadesignParticipant]

All that seemed to do is give the mobile nav menu a transparent background… problem still persists…

[RadModerator]

Hi there,

Isn’t the issue is about the navbar not staying fixed on top? Sorry, I’m still confused what’s the current issue. Removing the above CSS should enable fixed positioning back again. I checked on mobile and your navbar is fixed on top and moving along as I scroll.

Would it be okay if you provide a video recording about the issue?

Thanks!

[instadesignParticipant]

Hi Rad,

Here’s the video showing the issue I’m having on my phone: https://drive.google.com/open?id=0By3zFhexyf6rdXdfZ0NvR2ZxQ3c

Hope that shows it more clearly.

Thanks,

Henry

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> JavaScript :

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

Add following code in Customize -> Custom -> CSS :

@media (max-width:979px){

.class1{
top:0;

}
.class2{
top:20px;

}
}

Hope it helps.

[instadesignParticipant]

Hi Christopher,

Thank you for your time, however this still hasn’t worked… it does however now seem to behave correctly while the page is still loading, but not once finished. I wonder whether the js code is conflicting at all with other code I have in the customiser? This is what I have in there altogether:

jQuery ( function($) {

	$('.vc_tta-panel .vc_tta-panel-heading, .vc_tta-panel .vc_tta-panel-heading a').off('touchstart touchend');
	$('.vc_tta-panel .vc_tta-panel-heading a').on('click', function() {
		$('html, body').stop();
	} );

} );

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

jQuery( function($) {
$(window).scroll(function() {
	var width = $(window).width();
	if (width < 980) {
		
		var $adminbarHeight = jQuery('#wpadminbar').outerHeight();
		var $menuTop        = jQuery('.x-navbar').offset().top - $adminbarHeight;
		var $current        = jQuery(window).scrollTop();

		if ($current >= $menuTop && $current > 0) {
			$('.x-navbar').addClass('x-navbar-fixed-left');
		} else {
			$('.x-navbar').removeClass('x-navbar-fixed-left');
		}

	}

[LelyModerator]

Hi There,

Would you mind updating the code to this:

jQuery ( function($) {

	$('.vc_tta-panel .vc_tta-panel-heading, .vc_tta-panel .vc_tta-panel-heading a').off('touchstart touchend');
	$('.vc_tta-panel .vc_tta-panel-heading a').on('click', function() {
		$('html, body').stop();
	} );

} );

jQuery(document).ready(function($){
	$(window).scroll(function(){
							  
		var width = $(window).width();
		var $adminbarHeight = jQuery('#wpadminbar').outerHeight();
		var $menuTop        = jQuery('.x-navbar').offset().top - $adminbarHeight;
		var $current        = jQuery(window).scrollTop();
		if (width < 980) {
			
	
			if ($current >= $menuTop && $current > 0) {
				$('.x-navbar').addClass('x-navbar-fixed-left');
			} else {
				$('.x-navbar').removeClass('x-navbar-fixed-left');
			}
	
		}							  
		if ($current >10) {
			$('.x-navbar-fixed-top').removeClass("class1").addClass("class2");
		} else {
			$('.x-navbar-fixed-top').removeClass("class2").addClass("class1");
		}
	});
});

The last scroll function is missing closing tags and we have combine it. Do let us know how this goes.

[instadesignParticipant]

Thank you Lely,

I was hopeful that would be it, but I’m still getting the same behaviour… I really appreciate the support with this, it seems like such a small thing now and yet it’s quite obvious it’s not right! Any further suggestions/ ideas?

Thanks,

Henry

[RadModerator]

Hi there,

The problem on mobile is touch event triggers when you release your finger or hand from the screen. It’s the same on scroll event, it’s behaving like that since re-rendering happens when the event ends, and it’s when your stop scrolling and releasing the touch.

I recommend that you should hide the notice above the navbar on mobile. This will set your navbar flushing on top without a need to scroll event to end.

Please note that calculation and animation are only triggered once the scroll event ends. It’s not the same on desktop that event triggers on each press of scroll key or bar.

Thanks!

[Author]

Posts