Navbar items with anchor links landing too low when using a sticky header

[Sophiamp]

Hello,

I am using a sticky header and some of the nav items are anchor links, and when the page scrolls after clicking o of these nav items, it lands too far down the page.

I have tried a few different potential methods of resolving this from other forums, however have not been able to find one that works.

the site is currently in development and not yet live…

UPDATE:
I added this code and It is working, however now the space is just a bit too large and I am not sure which piece of the code could adjust the space height. I have the navbar shrinking which I think might be the issue…

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.hm1').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*="#"]').unbind('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, 'easeInOutExpo');
      }
    }
  });
});

[paul.r]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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.

Thank you.

[Sophiamp]

Hi Paul . -thanks for your reply - i just added a secure note above with the login details.

[paul.r]

Hi,

Please change your js code to this.

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 58;
  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*="#"]').unbind('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, 'easeInOutExpo');
      }
    }
  });
});

Hope that helps

[Sophiamp]

Thank you, yes this is working now!

[lely]

You’re always welcome!

Cheers.

[pyntolimited]

Hi. I had the same problem and this fix has worked for links put into the address bar or if the link with anchor is refreshed but if I click on a button on the page so it scrolls to the anchor the fix does not work. Is there a way to apply this adjustment to an onpage anchor being clicked?

Thank you.

[lely]

Hi There,

For future reference, if you want to share sensitive information, please do open a new thread. Content of secure note is visible on the original poster of the thread. Since what you share is just URL and not credentials, I did not edit the content of secure note.

Please try updating your theme. See our changelog here: https://theme.co/changelog/ for update information. Clear cache after that and then let us know how this goes.

[pyntolimited]

Ah yes, thank you I will make sure to start a new topic next time.

I have updated to the latest version and the problem is still the same. If you go to the page I mentioned and click the ‘learn more’ button it goes to the wrong place (just below the anchor, as if the sticky header was in the way), but if you refresh the page with the #anchor in the url it does what it should do and allows for the sticky header.

Please can you help with this.

Thank you.

[rad]

Hi there,

It’s not a link or a real button, it’s a slider layer styled as a button and clicking or linking is performed through javascript. You can’t override its behavior. You should add a real button, something like this

<a href="#api" class="x-btn scroll-to-section">Lear More</a>

Then simply add this code to your global custom CSS

jQuery( function($) {

$(document).on('click', '.scroll-to-section', function() {

$('html, body').stop().animate({ scrollTop : $($(this).attr('href')).offset().top - $('.x-bar-scroll').height() });

} );

} );

The reason it’s not working and needed a custom code like this is because that feature doesn’t exist. Custom scrollings are for one-page navigation only (which is for menus and not for buttons)

Thanks.

[pyntolimited]

Great, that worked, thank you. It was set as a button using revoultion slider but I guess that didn’t translate through. I changed it to a text layer with a link with the class you suggested and it worked.

Tamsin

[thai]

Glad to hear that