[FerryTimmerParticipant]

Hi There!

I’ve read multiple threads but it seems the solution for this problem is quite specific. I’m trying to set up a one page navigation with active classes when you scroll to the corresponding section. I also want to show the active class in the menu bar. Could you please give me the correct code for this to work? I’ve already set up the #section-1 etc. it’s just the problem with the active classes.

I want my navigation to work exactly like the one from Renew demo-2.

Thanks!

P.S. this is a piece of code I copied from another thread which I use now, but as I mentioned before it seems to be rather specific.

// 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 = $(this).attr('href').split("#").slice(0)[0];

	    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').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');

		}

	});

	$(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
		}
	})

});

[FerryTimmerParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! Unfortunately we can’t assist on any custom development as it’s out of our support scope.

Thanks for understanding.

[FerryTimmerParticipant]

What do you mean exactly? I’ve seen several topics where you did provide corresponding code just like the one I posted earlier. It is exactly the same problem as others have had but the code you provided there didn’t work for me. I’ve found several different codes but they don’t seem to work for me. Could you please take a look at what I’m doing wrong or at least put me in the right direction?

[John EzraMember]

Hi there,

Thanks for updating the thread! Sorry if my colleague’s reply seemed contradictory to what you are seeing us do. It is, however, true that custom development is beyond our scope of support. We do try to go above and beyond where possible. Like in cases where we see an obvious fix that is relatively easy to apply. We can’t go into anything too complex as it would be unfair to spend too much time on something beyond scope.

Your query however is regarding something that is a default behavior. If you setup your menu items and one page nav correctly, the active state should work when you are in that section.

The code you referenced in a previous reply seems to be for something specific. The right way to do custom links for one page nav is 1. to only use the ID and not the full URL. example: #x-section-1. Make sure there is no http:// in front either.

The next step is to make sure that on the page itself you have selected your one page nave menu in the one page navigation drop-down setting. This can be found in the page options below the default WordPress editor or in the X settings section.

Full URLs with the IDs at the end are only used on other pages. For example, your site isn’t just one page but has a page that uses the one page nav. The links that go to the other pages are simple full url links.

Two menus are required for that to work. One is to be set as the primary menu. This menu is the rest of the pages of the site. This menu will use full urls for all links. Even the one page nav menu items.

The other menu is the one you will select on the actual page, which will override the primary nav. This is so the one page nav will work properly on that page.

Hope this helps clarify – thanks!

[Author]

Posts