One page menu anchors landing too high - not accounting for sticky header height

[pyntolimited]

Hi Apex

I hope you can help. I have spent some time looking for solutions in the forum but none seem to work.

This is the site: http://217.199.187.195/ejerskifteklager.dk/

The menu should navigate to anchors on the page but it is not allowing for the header. The header is sticky and the height of the header is 90px.

Please can you help?

Tamsin

[nabeel]

Hi there,

Thank you for reaching out to us. I checked your setup and I see you’re using an old version of Pro, please update Pro to the latest version as many bugs have been addressed in the latest release of the theme. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

If the problem remains after updating the theme then add the following code in the Theme Options > JS:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-masthead .x-bar-fixed').outerHeight();
  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*="#"]').off('touchend click').bind('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, 'xEaseInOutExpo');
      }
    }
  });
});

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

[pyntolimited]

The update worked. I am sorry I didn’t try that, I know that is the first thing to try but thought it was up to date. I will make sure I update before contacting support next time.

Thank you

Tamsin

[paul.r]

You’re welcome!