Anchor link not landing location cut off by nav bar

[johnwvg]

Hi XTheme Gurus,
Please help me. I’m using the ethos stack on XTheme. My site has many areas where automatic scrolling is performed via an anchor. Such as a link pointing to “#section2” for example.

My issue is that it scrolls down too far, past the area it should be stopping at. It appears to be getting cut off by my navigation bar. Is there a way this can be fixed with CSS or should I do something else?

I will attach a link to a page that’s having this issue in a secure note. Thank you!

[ruenel]

Hello There,

Thanks for writing in! The anchor link will check the height of your navbar so that when the page scroll, it will land on the correct section. To resolve your issue, please go to X > Theme Options > Header > Navbar and set the “Navbar Top Height” to 80 pixels because this is the actual height of your navbar.

Hope this helps. Please let us know how it goes.

[johnwvg]

Hi!
I changed the Navbar Top Height to 80 as you instructed and I still have the same issue.

I am using the included XTheme plugin “UberMenu” for my top menu. Any chance it could be related to that plugin?

Thanks for your help!

[nabeel]

Hi again,

I checked your site and I see your assigned height is not being applied due to the custom CSS you have (see screenshot)

Please find and remove the following code and see if this resolves the issue.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

Let us know how this goes!

[johnwvg]

Hi, good catch! I am sorry to report however, that even after removing that code from my custom CSS, I’m still having the same issue.

Thoughts?

Thank you for all your help so far! Your support team is awesome!

[ruenel]

Hello There,

I am still seeing the code. Could you please remove it first so that we can test it. If possible, you may provide us WP access to your site so that we can investigate thoroughly.

Thank you.

[johnwvg]

Hi,
I cannot find where it is loading that code from. It is commented out in my CSS file. If you could help me that would be GREATLY appreciated. I will provide you with WP access via a secure note. Thank you so much!

[paul.r]

Hi,

To fix this, you can try adding the code below in Theme Options > JS

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 80 ;
  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);
    return false;
  }


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

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


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('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, 'xEaseInOutExpo');
        return false;
      }
    }
  });
});

Thanks

[johnwvg]

Hi Paul,
That worked GREAT! The issue is resolved. Thank you so much! Your product support is second to none!

Question… Why was that happening? Is it a plugin I installed or is this an issue in XTheme that possibly is affecting more users than just me? Just wondering what I did to cause this (if anything). Thank you!

John

[mldarshana]

Hi John,

This was an issue in the past but have been fixed with X v6.2.5 update. I think what you have experienced is specific to your setup and customizations that you have added.

Anyway, I’m glad it works for you.

Thanks!