Section IDs not accounting for Menu Height

Support
#1

When I click on a menu item that links to a section ID on the homepage, it links to that section but it isn’t accounting for the height of the menu. (So it comes out not showing the top of the section.)

Could anyone help me out?

#2

Hello @malogna6,

Thanks for writing in!

Did you positioned your navbar as “Fixed Top” in X > Theme Options > Header > Navbar? If that is the case, please make sure that you also have inserted a value of the Navbar Top Height which should be the actual height of your navbar.

If this does not work, please provide us the url of the site so we can check it out.

Regards.

#3

I appreciate your response! Yes, it is at Fixed Top at 100px height. My URL is http://www.3dheadquarter.com/. Please take a look if you could.

JP

#4

Hi JP,

Thank you for providing the URL. To fix the issue, try adding 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-navbar').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);
	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) {
    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');
		if(!$('.x-nav-wrap-mobile').hasClass('.x-collapsed')) {
			$('.x-btn-navbar').click();
		}
		return false;
      }
    }
  });
});

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

Scroll to ID
#5

That worked perfectly. Can’t thank you enough!

#6

You’re welcome, @malogna6. Please just remember that the code provided here is not needed because our theme takes into account the Navbar Height as a feature. In this latest version, the said feature might not be working because of a known issue with the Classic Header Menu. Once the bug has been fixed, please remove the code given. Once the new version is out, try removing the code and see if the menu smooth scrolls to the section while taking into account the Navbar height. If it’s still not behaving as it should, you can restore the code back.

Thanks.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#9

Hi @malogna6,

In the next update (scheduled for this afternoon) this issue should be resolved and you will be able to remove the custom code.