Docs

[steve n]

Hi there, on my website http://www.pocketsightwords.com/ on mobile, the navigation scrolls to the correct section, but it leaves a little bit of gap.

how do i make so that it scroll straight to the section without the gap?

note that this only happens on mobile. thanks.

[Thai]

Hi There,

#1] Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 979px){
    .x-navbar.x-navbar-fixed-top {
        position: fixed;
    }
}

#2] Please add the following code under Customizer > Custom > Global Javascript:

(function($){
	$(".home .x-navbar .mobile .x-nav li>a").on('click touchend', function(event) {
		event.preventDefault();
		$('.x-btn-navbar').trigger('click');
	});
})(jQuery);

Hope it helps 🙂

[steve n]

thanks for the help, I’ve added those codes but the scrolling is still leave a bit of gap between navbar and the section. please see attached

[Rad]

Hi there,

Please check this other thread

https://community.theme.co/forums/topic/problems-with-one-page-navigation/

And the code is should be

jQuery(function($){
	$(document).ready(function(){
		
		// Fixing One Page Navbar Offset on Mobiles
		function onePageScrollFixer() {
			var $body           = $('body');
			var $bodyHeight     = $body.outerHeight();
			var $adminbarHeight = $('#wpadminbar').outerHeight();
			var $navbarHeight = $('.x-navbar').outerHeight();
			var scrollSpyLinks = $('.x-nav > li > a[href^="#"]');
			
			if ($(window).width() <= 979) {
				scrollSpyLinks.off('click touchstart touchend'); 
				scrollSpyLinks.on('click', function(e) {
					e.preventDefault();
					e.stopPropagation();
					// console.log('scrolling');
					var $LinkTarget = $(this).attr('href');
					$('html, body').stop().animate({
						scrollTop: $($LinkTarget).offset().top - 90
					}, 850, 'easeInOutExpo');
				});
			}
			
			else {
				scrollSpyLinks.off('click touchstart'); 
				scrollSpyLinks.on('click touchstart', function(e) {
					e.preventDefault();
					var $LinkTarget = $(this).attr('href');
					$('html, body').stop().animate({
						scrollTop: $($LinkTarget).offset().top - $adminbarHeight - $navbarHeight + 1
					}, 850, 'easeInOutExpo');
				});
			}
	   }

	   onePageScrollFixer();

	   $(window).resize(onePageScrollFixer);
		
	});
});

Cheers!

[steve n]

Hi, i copy pasted that codeblock but it still doesn’t solve the problem.

i even added the var $navbarHeight = ( $(window).width() <= 979 ) ? 0 : $('.x-navbar').outerHeight(); as per the comment suggested. still doesn’t solve the problem.

any other suggestion?

[Paul R]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[steve n]

This reply has been marked as private.

[Rad]

Hi there,

I went ahead and added the fix.

1. I changed your menu URL from this format http://pocketsightwords.com/homepage/#x-section-13 to this #x-section-13 since it’s just scrolling on same page.

2. Then added some changes to the above js code.

Please check now, and please clear your browser cache before testing.

Cheers!

[steve n]

thanks so much. just for future reference, is the code you fixed this one?

jQuery(function($){
	$(document).ready(function(){
		
		// Fixing One Page Navbar Offset on Mobiles
		function onePageScrollFixer() {
			var $body           = $('body');
			var $bodyHeight     = $body.outerHeight();
			var $adminbarHeight = $('#wpadminbar').outerHeight();
			var $navbarHeight = ( $(window).width() <= 979 ) ? 0 : $('.x-navbar').outerHeight();
			var scrollSpyLinks = $('.x-nav > li > a[href^="#"]');
			
			if ($(window).width() <= 979) {
				scrollSpyLinks.off('click touchstart touchend'); 
				scrollSpyLinks.on('click', function(e) {
					e.preventDefault();
					e.stopPropagation();
          $('.x-btn-navbar').trigger('click');
					// console.log('scrolling');
					var $LinkTarget = $(this).attr('href');
					$('html, body').stop().animate({
						scrollTop: $($LinkTarget).offset().top - 90
					}, 850, 'easeInOutExpo');
				});
			}
			
			else {
				scrollSpyLinks.off('click touchstart'); 
				scrollSpyLinks.on('click touchstart', function(e) {
					e.preventDefault();
					var $LinkTarget = $(this).attr('href');
					$('html, body').stop().animate({
						scrollTop: $($LinkTarget).offset().top - $adminbarHeight - $navbarHeight + 1
					}, 850, 'easeInOutExpo');
				});
			}
	   }

	   onePageScrollFixer();

	   $(window).resize(onePageScrollFixer);
		
	});
});

[Rue Nel]

Hello There,

Yes that is the code.

And by the way, since you have installed a caching plugin W3 Total Cache, please always clear your plugin cache first before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps.

[Author]

Posts