Wrong Link in Nav Being Highlighted!

Support
#1

Hi, I’m working on a new site and our client has asked for a one page navigation with 3 additional pages that have a normal navigation function.

Website: http://pplevents.com/

I have a maintenance page on, so I’ll provide the password when I can send a secure reply.

The one page navigation includes these pages:
Home, About Us, Services

The 3 additional normal navigation pages:
Gallery, News, Contact Us

If you click onto the Galley, News or Contact Us pages, then click ‘Services’ it goes to the correct part of the page, but the ‘About Us’ link in the menu is highlighted instead of ‘Services’! I don’t know how to correct this!

Thanks!

#2

Hello There,

Thanks for writing in! This issue may have happened because there is a conflict with your custom JS in the customizer. Could we temporarily remove them one by one to check which one is causing the issue?
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#3

Hi, I’d really appreciate it if you wouldn’t mind taking a look for me! I’ll put the login details in a secure note.

Thanks!

#4

Hello,

I`ve checked your site and all looks great, I tried to reproduce your problem and I couldn’t - but I checked that the service page is with the anchor #service instead some page like the other links.

#5

Hi, I’m still getting the same issue. I’ve refreshed the page and emptied my cache etc, but when I click onto the Galley, News or Contact Us pages, then click ‘Services’ it goes to the correct part of the page, but the ‘About Us’ link in the menu is highlighted instead of ‘Services’!

Cheers

#6

Hi There,

It seems the issue has something to do with how you made the topbar a fixed top. Please reset your topbar to its default position (static top).

Thanks,

#7

But the client wants it to be a fixed top bar and nav bar, so that’s not an option I’m afraid!

Cheers

#8

Hello There,

Thanks for updating in! Could we update this custom JS:

//
  // Scroll trigger.
  //

  $('a[href*="#"]').unbind('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        
        if (dragging) {
            return;
        }
        
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

And change it to this code:

//
// Scroll trigger.
//

  if ( $('.hm1.x-bar-fixed').length > 0 ) {

    $('a[href*="#"]').unbind('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
      href        = $(this).attr('href');
      notComments = href.indexOf('#comments') === -1;
      if ( href !== '#' && notComments ) {
        var theId = href.split('#').pop();
        var $el   = $('#' + theId);
        if ( $el.length > 0 ) {
          e.preventDefault();
        
          if (dragging) {
            return;
        }
        
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  }
});

Please let us know how it goes.

#9

Hiya, thanks for that! It worked great, besides the fact that when you click on ‘Services’, the top bar disappears! Other than that it solved the issue of it not being highlighted in the nav bar. I’ve had to change the code back as our client wants the site going live soon and needs the maintenance page taking off.

Thanks!

#10

Glad to hear we managed to help!

#11

Hi, sorry, I don’t think I was clear on my previous reply, the custom JS script solved the issue of the wrong link being highlighted in the nav bar, but created another issue with the top bar disappearing, so I’ve had to put the code back to how it was, so I still have the original problem of when I click onto the Galley, News or Contact Us pages, then click ‘Services’ it goes to the correct part of the page, but the ‘About Us’ link in the menu is highlighted instead of ‘Services’.

Cheers!

#12

Hi again,

To fix the issue, please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-nav li').each(function(){
		$(this).removeClass('current-menu-item');
	});
	
	$('.current_page_item').addClass('current-menu-item');
	
	$('.x-nav li').click(function(){
		$('.x-nav li').each(function(){
			$(this).removeClass('current-menu-item');
		});
		$(this).addClass('current-menu-item');
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#13

Hi Nabeel

I’ve added in the code but it’s still doing it - do you get the same problem I’m having? I’ve tried it on both of my macs and I get the same problem on them both.

Cheers

#14

Hi there,

I tried to login but it says ‘invalid username’ can you please double check the credentials if it still exists?

Thanks!

#15

Ah, I deleted the user as I’ve out the site live and was going to go through the admin with our client! I’ve added in a new one and I’ll add a secure note with the details.

Thanks!

#16

Hi there,

Please replace that recent javascript with this

jQuery( function($) {

var hash = window.location.hash;

if ( hash.length > 0 ) {

$(document).ready( function() {

$( 'a[href="'+hash+'"' ).trigger('click');

} );

}



} );

Hope this helps.

#17

Hi Iam

Thanks for that, however it didn’t really solve it I’m afraid, it kept flicking highlighting between ‘About Us’ and ‘Services’! It also created another similar issue on the Home page:

  1. When you’re on the Home page and click on ‘About Us’ and then click on ‘Services’, the ‘About Us’ stays highlighted instead of Services.

I don’t think this can ever be resolved, so I don’t want to waste any more of your time! I’ll go back to the javascript how it was before and stick with the original issue, as then it’s only a problem in the one respect instead of it effecting the Home page too!

Thanks!

#18

Hi there,

The one-page navigation isn’t really setup for that, it meant to link within the page and not from another page. It’s blinking is because the page is loading and usually, the script only start executing when the page or script is loaded.

The one-page navigation doesn’t need to load since it’s a single page.

Thanks.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.