Docs

[NailedIT]

Hi there,

I’m using a mixed navigation (one page links & links to other pages in the same menu).

With a lot of browsing in the forum it’s nearly working perfectly.

For anyone also looking for a solution, I thought I add here a short summary of the basic configuration and the 3 solutions:

Basic configuration:

1. In the menu use absolute links (e.g. http://www.yourwebsite.com/#x-content-band-1) instead of only relative links (e.g. #x-content-band-1).
2. In the “Page Settings” of your One Pager page choose the menu under “One Page Navigation”.

Fix 1: The scrolling is not working for the one page navigation. Use this JavaScript (add in the Customizer):

// Conditions
// 1. Menu should be using full url, eg. http://site.com/#x-content-band-1 and not just #x-content-band-1
// 2. Use just one menu for both Primary and One Page.

jQuery(function($){
	
	var window_base = window.location.href.split("#").slice(0)[0];
	var window_hash = window.location.hash == '' ? 'body' : '#'+window.location.href.split("#").slice(-1)[0];
	var outbound = /^https?:\/\//i;

	$('.x-nav a').each(function(){ //Scan links and convert them to relative hash for one page navigation's Active statuses to work properly when manually scrolling

		var hash = /#/.test( $(this).attr('href') )  ? '#' + $(this).attr('href').split("#").slice(-1)[0] : '';
		var anchor_base = /#/.test( $(this).attr('href') ) ? $(this).attr('href').split("#").slice(0)[0] : $(this).attr('href');

	    if(hash) { //Does it have hash? then perform check
		    if(anchor_base == window_base) { //If same page, then no need to reload, just make it relative
		    	$(this).attr('href', hash);
		    } // Else, leave it that way. So when user clicked, it will just link them to outbound page
		}

	}).click(function(e){ //Enable Parent and Submenu scrolling
		
		var hash = /#/.test( $(this).attr('href') ) ? '#' + $(this).attr('href').split("#").slice(-1)[0] : 'body';
        
	    if(hash && !outbound.test( $(this).attr('href') ) ) { //Does it have relative hash?

		    	e.preventDefault(); //Disable jumping
		    	e.stopPropagation();

		    	$('html,body').stop().animate({ scrollTop: $( hash ).offset().top - $('.x-navbar').height()},700 ,'swing');

		    	//Now add active status for automatic scrolling
		    	$('.x-nav li').removeClass('current-menu-item');
		    	$(this).parent().addClass('current-menu-item');

		}

	});

	//$('html,body').css({ scrollTop : 0});
	setTimeout( function(){
	$(document).ready(function(){ // Enable auto scroll when loaded.
		$('.x-nav li').removeClass('current-menu-item');
		//$('a:not([href*="#"])').parent().addClass('current-menu-item'); For experiment only

		if(window_hash) {
			$('a[href$="'+window_hash+'"]').click(); //Click it, so it will use default click from one page navigation event and submenu event
		}
	}); }, 300);
});

I found this here: https://community.theme.co/forums/topic/page-links-using-ids/page/2/#post-98964

Fix 2: On mobile devices, the one page navigation links don’t scroll exactly to the right position. Use this JavaScript:

// Fixing One Page Navbar Offset on Mobiles
jQuery(document).ready(function($) {
   function belowMastheadArrow() {
      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'); 
         scrollSpyLinks.on('click touchstart', function(e) {
            e.preventDefault();
            var $contentBand = $(this).attr('href');
            $('html, body').animate({
               scrollTop: $($contentBand).offset().top + 1
            }, 850, 'easeInOutExpo');
         });
      } else {
         scrollSpyLinks.off('click touchstart'); 
         scrollSpyLinks.on('click touchstart', function(e) {
            e.preventDefault();
            var $contentBand = $(this).attr('href');
            $('html, body').animate({
               scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight + 1
            }, 850, 'easeInOutExpo');
         });
      }
   }

   belowMastheadArrow();

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

Found this here: https://community.theme.co/forums/topic/integrity-one-page-menu-on-mobile-doesnt-scroll-far-enough/#post-307059

Fix 3: If you have the one page navigation in a sub menu, you can’t click on the toggle and open the sub menu on mobile devices (it scrolls instead of opening the sub menu). Use this JavaScript:

/* Sub menu Toggle Fix */
jQuery(function($) {
$(".x-nav-wrap.mobile li.menu-item-has-children a").off("touchstart touchend click"); 
$(".x-nav-wrap.mobile a").not('.x-nav-wrap.mobile li.menu-item-has-children a').on( "click", function() {

setTimeout(
  function() 
  {
     $('.x-btn-navbar').click(); 
  }, 150);
    
});
});

Found this here: https://community.theme.co/forums/topic/problems-combing-onepage-with-external-links/page/2/#post-1292470

Now my 1 little problem:
I want to use the link http://www.mydomain.com/# in my menu, so that on the one pager page I can jump back to the top of the page (instead having to reload the page, if you use the link without #). See here my example live: http://www.gma-associates.com/dienstleistungen/#

But unfortunately Fix 1 breaks this. Nothing happens if I click on the link. Probably the JavaScript has a problem if there is nothing after the #.

Any idea how to fix this?

Thank you very much and best regards,
Michael

[Lely]

Hello Michael,

Thank you very for your very detailed post. Surely this will help others as well.

Regarding that last issue, please use this instead: http://www.mydomain.com/#top

Hope this helps.

[NailedIT]

Hi Lely,

Sorry, my fault, totally forgot to mention: I already tried it with #top. On the one pager page it works. But unfortunately then the link does not work on all other pages. E.g. if you are on the home page (you can try it live here: http://www.gma-associates.com/) and click on the link “Dienstleistungen” (with the #top link), it won’t work.

Maybe there is a conflict, because the “To Top” Button also uses the #top anchor?

In the meantime I found a workaround: Create 2 menus – one main menu (with only #) and one for the one pager page (with #top).

BUT: It would be really awesome if we could fix this somehow (probably the JavaScript code for Fix 1?) to avoid creating and managing 2 menus, just because of this # / #top link problem.

I think then we should have a really good solution for all X theme users who need a mixed navigation 🙂

Thanks again and best regards,
Michael

[Rad]

Hi there,

It’s unavoidable since you’re mixing one-page and normal page. It’s also the workaround we’re recommending when it comes to that setup. One page should relative URLm and the normal page should have absolute URL.

Relative URL are those ID only, like #x-section-1, while absolute is the full URL http://example.com/#x-section-1

And yes, don’t use #top, any ID matches the current page’s ID will not work. You can try this javascript,

jQuery( function($) {

$('body:not(.x-one-page-navigation-active) .x-navbar .x-nav-wrap .x-nav > li > a').on('click', function(){

window.location = $(this).attr('href');

} );

} );

Hope this helps.

[NailedIT]

Hi Rad,

You’re saying it’s unavoidable, but the JavaScript you provided seems to exactly fix that? 🙂

Just for clarification: Now I only use 1 menu (for the normal pages and the one-pager page) with absolute URLs. And with your JavaScript I can use the URL with #top from every other page.

So from my side at the moment everything seems to work.

Thank you very much for the Fix #4 and hopefully this thread is also helpful to other people 🙂

Best regards,
Michael

[Lely]

Glad that everything is working now Michael.

Cheers!

[Author]

Posts