Docs

[KierynM]

Hello,
I am having trouble with my one page navigation. I have a nav bar that I have managed to get to resize (from 140px to 80px) when I start to scroll. This looks great but unfortunately when I click on any of the links it scrolls to the relevant section but not to the top of it, instead it scrolls and stops above the next section with around 30-50px gap (so you can still see some of the previous section). I was hoping you could help me. I also have a revolution slider above the mast head of my first section and when I click my ‘home’ link (the section after the rev slider) it shows the biggest gap. Look forward to hearing from you.

Cheers

[KierynM]

the site is http://www.helpingtradiesonline.com

[John Ezra]

Hi there,

Thanks for updating the thread! Would you mind telling us what you did to get your navbar to resize? It’s highly possible that this had an affect that influenced the behavior of the one page nav when scrolling. Also, please provide 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.

[KierynM]

This reply has been marked as private.

[KierynM]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > Javascript in the Customizer.

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() - 48;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchstart click', function(e) {
    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();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

Hope that helps.

[KierynM]

This reply has been marked as private.

[Jack]

Hi there Kieryn,

Thanks for writing back!

1: I’ve taken a look at this on your site and it’s definitely odd, that Javascript code shouldn’t stop the anchor link from working at all, I’ve tried it on my own site and it seems to work fine. Would it be possible for you to check for a plugin conflict? If you disable everything apart from Rev Slider, Cornerstone and X, does it still happen with that JS added?

2: Could you let me know browser this is in please? I tried in Firefox and Chrome and when I clicked say on pricing and then clicked home, it took me back to the top and the menu expanded again. If you could let me know your browser version, we’d be happy to debug why this is happening, in addition could you let me know the screensize as well, as it could be a responsive issue.

3: Sure, we’d be happy to take a look at this, did you want it to only be shown initially, and then be removed on scroll? As we can add a new menu item and then hide it on scroll, the menu item would contain the icon and the number. Alternatively that white space is only there because of the logo, so we could vertically align the menu with the logo, bringing it down slightly at the top. 🙂

Thanks!

[KierynM]

hey guys!

With regards to what you have been helping me with:

1. I deactivated all the plugins as you suggested but the problem still persists. i have noticed when I am in cornerstone and I click the anchor it redirects me from http://www.helpingtradiesonline.com/?cornerstone=1 to http://www.helpingtradiesonline.com/?cornerstone_preview=1#
When I am just on my published site (www.helpingtradiesonline.com) and I click on the anchor nothing physically changes but I notice the url changes to http://www.helpingtradiesonline.com/#

2. I am using chrome Version 49.0.2623.112 m. I checked today and when I click ‘home’ the navbar sends me to section 1 and returns to its ‘large’ size but I can see around 50px of rev slider above it. I actually disabled the rev slider to check if the navbar works perfectly and it did. It stayed large until i started scrolling, when I clicked different links it took me to that relevant section without a gap under it, and when I clicked home it went to section 1 and reset to its default ‘large’ navbar setting. I can only assume then the conflict is with the rev slider (as the anchor is not working and it screws up the navbar when its enabled).

3. Yes that sounds great! The icon and number with my rgb(237, 147, 12) and hover rgb(42, 79, 146). Could it also be a click-to-call button so when pressed it will call if done from a mobile? When the user starts to scroll and the navbar reduces in size this icon/number can then hide.

Absolute legends, I really appreciate the help and will be using X for all my future sites, the functionality and support is unparalleled.

Cheers

[Jack]

Hi Kieryn!

1: That definitely is strange, it’s correct it’s adding the hash to the URL, as normally a anchor link would use a CSS id, so it’d link to something like #section1 and it’d prepend that to your URL. I just tried your FTP details again to check that some more, but got a invalid login error, are the details still valid?

2: Thanks for the clarification! Try changing this line in the supplied Javascript code.

var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() - 48;

to

var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() - 32;

3: Perfect! Can you let me know your number you want (feel free to make it a private reply) and I’ll then add the menu and any code modifications needed and then explain what was changed so you know. 🙂

Thanks again!

[KierynM]

This reply has been marked as private.

[Jack]

Hi there Kieryn,

Thanks for writing back!

1: So this turned out to be the scrollspy refresh JS that’s breaking # anchor links. If you remove:

 //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

The anchor links work perfectly, I’ve tested with it removed and everything still seems to work ok. So it may be worth removing that and checking you’re still happy with how everything works.(Note I added it back after testing, so you’d need to re-remove it).

2: Try adding a margin-top to your slider, this will make the slider slightly smaller, though in my testing it didn’t impact on the visibility of the slide itself.

.x-slider-container {
  margin-top: -150px;
}

3: I’ve added the menu item and a custom class along with the phone icon, though unfortunately when styling that specific menu item it pushes all the other menu items along and can’t be moved central without causing display issues. Also when a menu item is moved central,for example if it was placed in the middle of the menu and then moved down, on scroll when it’s removed, there would still be a gap where the menu item was. (Screenshot attached).

Please let me know how you wish to proceed with #3.

Thanks! 🙂

[KierynM]

Hey mate,

1. The anchor works perfect now. Great fix

2. The navbar still shows problems unfortunately:
a) Every time I click on a new section link (for example ‘reviews’) the user can still see a bit of the previous section under the navbar.
b) When you click the ‘home’ link on the navbar it takes you back to section 1 but it you see some of the rev slider above the navbar.

3. The phone number inline with the other links doesn’t look very good. It would be better to get rid of the number altogether and vertically align the links to the logo (minimising the dead space below the links when the navbar is enlarged). If you could do that please that would be great.

Once again I appreciate the help and look forward to seeing the results.

Cheers guys!

[Rue Nel]

Hello There,

Thanks for writing in!

#2] There is a JS error on the page which may have caused this issue. Please update the JS code in your customizer and use this instead:

jQuery(document).ready(function($) {
 $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() - 32;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchstart click', function(e) {
    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();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });
  }
});

Please be very careful in copying any code. And make sure that there are no orphaned or missing curly braces and parenthesis.

#3] You no longer want the phone number or you want it somewhere else? To align the menu and adjust the menu item position, simply go to the customizer, Appearance > Customize > Header > Links – ALignment and adjust the “Navbar Top Link Alignment (px)”.

Hope this helps.

[Author]

Posts