Problem with one page navigation scroll offset after fixing topbar

Hi! I have added a fixed navbar and manually added a fixed topbar to my website: http://noslajuegan.org/

Now the One Page Navigation system is not working properly: the offset is not enough and part of the section titles are overlapped by the navbar and topbar. I have checked other support messages but none of the javascript codes provided to other users are working to me. What can I do? Thanks!

The problem doesn’t seem to solve even when I deactivate the fixed topbar: the scroll is also making the fixed navbar overlap the titles…

Besides that, the whole navbar has gone mad: it has a weird margin to the left, doesn’t adjust to the body width…

Any help please???

Hi,

To fix it, you can add this in Theme Options > JS

jQuery(document).ready(function($){
    $(window).scroll(function(){
        
      if ( $(this).scrollTop() == 0 ) {
          $('.x-navbar').removeClass('x-navbar-fixed-top');
         $('.x-navbar').removeClass('x-container');
      } 

      if ( $(this).scrollTop() > 0 ) {
          $('.x-topbar').addClass('x-topbar-fixed-top');
      } else {
        $('.x-topbar').removeClass('x-topbar-fixed-top');
      }
    })
});

Thanks! It’s still working bad on the first menu item “El Informe”, you can check that the section title is still overlapped. Also the navbar is not as wide as the site width.

Hi there,

The one-page navigation should work without any custom code addition for the X theme. Would you please remove any kind of customization that you have done and only keep the changes that you have added in the Theme Options, then would you please follow the steps below to add the One Page Navigation:

That should work without the need for any custom Javascript code.

Thank you.

Yes, the problem is that I can’t remove the customization as the website is almost done and I have to deliver it this week. In any case, there are no customization in other parts besides Custom CSS in Theme Options.

Now the problem is just with the first item of the menu: it scrolls down too much and the title of the first section is overlapped. It happens with any section that goes in first place in the One Page Menu, and only the first time you click: if you click again from other part of the website it will scroll to the right position.

It’s very urgent. Thanks.

Hello There,

I can confirm that this is an issue. This is because the topbar height is not included in the computation of the JS scripts which is why if you noticed that there is a diiference of at least 34 pixels when you scroll to a specific section. To temporarily resolve this, please add this custom JS code

jQuery(function($) {

  var $body                = $('body');
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .masthead').outerHeight();
  var locHash              = null;
  var dragging             = false;

  var locHashIndex = location.href.indexOf('#');
  if ( -1 !== locHashIndex ) {
    locHash = location.href.substr(locHashIndex).split('/')[0];
  }

  $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 ) {

    if ( ! element ) {
      return;
    }

    try {
      var $el = $(element);
    } catch(error) {
      // abort on invalid selectors. see #610
      return;
    }

    if ( ! $el || 0 == $el.length ) {
      return;
    }

    $('html, body').animate({
      scrollTop: $el.offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);

  }


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

  $(window).on('load', function() {
    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, 'xEaseInOutExpo');
      }
    }
  });

});

I’ve already submitted this to our issue tracker so the developers will be made aware of it.

Thank you for your understanding.

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