Docs

[ellenroco]

Hello, wondering if anyone can help.

URL: http://www.pureactive.co.uk
Wordpress Version: 4.6
X Version: Child theme (unsure from which version)
Cornerstone Version: 1.3.0

After opening the mobile menu and tapping a section, it jumps to it (the website is one page) but the menu doesn’t automatically close. If you tap the burger again to close, it jumps back to the top.

Also the smooth scroll doesn’t work properly in mobile or desktop versions. I did add some custom jQuery to make the menu stick by changing classes, would this cause problems?

Many thanks,
Ellen

[Jade]

Hi Ellen,

You can add this under Custom > JS in the Customizer.

jQuery(function($){
  $('.mobile .x-nav a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });
});

Hope this helps.

[ellenroco]

Thanks very much, that helped with the closing issue.

Do you know why the smooth scrolling doesn’t work? Also, if you tap the menu button again, it still jumps to the top of the page.

Thanks again.

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[ellenroco]

This reply has been marked as private.

[Jade]

Hi Ellen,

Please try to add this code in the JS customizer:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  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;
    notAccordion     = $href.indexOf('#collapse-') === -1;
    notTabbedContent = $href.indexOf('#tab-') === -1;
    if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
      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 this helps.

[ellenroco]

Thank you! This is so much better, the smooth scrolling works perfectly. The only final problem is the page jumping back to the top the second time you tap the mobile menu button. Any ideas on what’s causing that? Thanks again!

[Paul R]

Hi,

Please change the code provided above to this.

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();
  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*="#"]').not('.x-btn-navbar').on('touchstart click', function(e) {
    $href            = $(this).attr('href');
    notComments      = $href.indexOf('#comments') === -1;
    notAccordion     = $href.indexOf('#collapse-') === -1;
    notTabbedContent = $href.indexOf('#tab-') === -1;
    if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
      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.

[ellenroco]

Did you move my custom JS around? I think I replaced the wrong part and now it doesn’t work at all… Definitely should have backed this up first… Do you have a backup? My menu doesn’t stick to the top now any more. Thanks.

[Rad]

Hi there,

We don’t have any backup as we didn’t edit your existing code. I can confirm that some codes are misplaced and deleted. But I’m not really sure how it was setup and I’m afraid to touch it. Would you mind requesting a restoration from your hosting?

Thanks!

[ellenroco]

Thanks Rad, definitely my own fault for not copying it first. I do have some backups through the updraft plugin, do you know where I would find a file with this custom JS that I can copy back in? Or as it’s part of the page might it be in the database backup? I’d rather not have to restore totally, but no worries if not.

Thanks again!

[Christian]

Hey Ellen,

Your will have to restore the database.

Thanks.

[ellenroco]

Right I’ve go it back to how it was after adding the second code from Jade which fixes the smooth scrolling, but then tried replacing that with the code from Paul R, which doesn’t seem to work on the jumping to the top issue, and breaks the first fix for the menu staying open, so I removed it again.

Any suggestions here on how to stop the page jumping to the top after tapping the mobile menu button a second time? Otherwise I’ll settle for leaving it as is.

Thanks for all your help so far!

[Rad]

Hi there,

You mean the mobile hamburger icon right?

Please add this

jQuery( '.x-btn-navbar' ).off('touchstart touchend').on('click', function(e){ e.preventDefault(); });

Hope this helps.

[Author]

Posts