Consider navbar height in #id links

[KEXINO]

Hi there,

Using Pro, I’m using #ID tags for on-page links to sections further down the page. Since the scroll doesn’t take into account of the height of the navbar, it scrolls too far down. How do I offset this?

Creds attached, if you need them. The page concerned is “Services”.

Thanks in advance.

[ruenel]

Hello There,

Thanks for writing in! Please be advised that one page nagivation is not available in Pro theme yet. To resolve your issue, the eaisest way is to add a top and bottom paddings for the section. Instead of using the default 45px top and bottom padding, please change it to 100px. This is enough because your header is just 95px.

Please let us know how it goes.

[KEXINO]

I’ve just found this bit of Javascript. It includes smooth scroll (which I obviously don’t need any more), but also takes into account navbar height:

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 82;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
	  dragging = true;
  } );
  
  $body.on('touchstart', function() {
	  dragging = false;
  } );


  //
  // 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('touchend 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();
        
        if (dragging) {
	        return;
        }
        
        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);

  }

});

Could you take a look and let me know your thoughts?

[ruenel]

Hello There,

Thanks for updating in! Please be advised that the same JS code still in use for the default navbar only. This will no longer work if you are using a custom header in Pro. We can however add a custom JS code out of it.

Please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

(function($){
  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchend 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();
        
        $('html, body').animate({
	      scrollTop: $( $el ).offset().top - 95
	    }, 850, 'easeInOutExpo');
      }
    }
  });
})(jQuery);

Please keep in mind that this code is specific for your homepage. It may or may not work in some other pages. Please understand that this is just a temporary solution to the current issue. Rest assured we will follow up and bump the developers for the one page support in Pro theme.

Thank you for your understanding.

[KEXINO]

Really appreciate your help here

I’ve added the .js but the scroll is going too far down the page. I tried changing the scrollTop: $( $el ).offset().top - 95 value, but nothing seems to work.

[christian]

Hey @KEXINO,

I understand your concern about this feature but we could not develop features on the fly. I recommend that you wait for official support for the One Page Navigation to work in the Pro built header.

Thank you for understanding.