Docs

[Frosting]

Hi,
I got a problem with my one page menu. I´ve set my menu to shrink when scrolling down. But when I use the menu to navigate to the sections, it stops around 40px before the section. I guess it has to do with the shrinking menu. Is there a way I can fix this?

URL: http://faradium.f-dev.se/
X-Theme: 4.4.2
Cornerstone: 1.2.4
WP: 4.4.2

[Rad]

Hi there,

Thanks for writing in.

What do you mean by shrink the menu? It’s not shrinking on my end. But if you’re trying to position the navbar on top of the slider then add this CSS to Admin > Appearance > Customizer > Custom > Global CSS

.home .masthead {
height: 0px !important;
}

Thanks!

[Frosting]

Hi,
the navbar are shrinking in height when you scroll down (adds a class of .shrink when you scroll pass 90px) and sets a transparent black background. You don’t see that on your end?

[Paul R]

Hi,

Thanks for the clarification.

Yes, it has something to with the shrinking.

To fix it, you can add this in your custom > javascript in the customizer

jQuery(document).ready(function($) {
 $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() -40;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // 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*="#"]').on('touchstart 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();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

Hope that helps.

[Author]

Posts