[Nabeel AModerator]

Hi again,

You can try replacing the previous code with this one:

// Correct Positioning
jQuery(document).ready(function($) {

  var screenWidth     = $( window ).width();
  if( screenWidth < 980 ) {
  var $body           = $('body');
  var $adminbarHeight = $('#wpadminbar').outerHeight();
  var $navbarHeight   = $('.x-navbar').outerHeight();
  var $topbarHeight   = $('.x-topbar').outerHeight();
  var $logobarHeight   = $('.x-logobar').outerHeight();

  $('.x-nav-scrollspy li a[href^="#"]').off('click');
  $('.x-nav-scrollspy li a[href^="#"]').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight - $topbarHeight - $logobarHeight + 1
    }, 850, 'easeInOutExpo');
  });

  $body.scrollspy({
    target : '.x-nav-collapse',
    offset : $adminbarHeight + $navbarHeight + $topbarHeight + $logobarHeight
  });

// Fixing the custom JS code for inner pages
  var $navbarHeight   = $('.x-navbar').outerHeight();
  var $topbarHeight   = $('.x-topbar').outerHeight();
  var $logobarHeight  = $('.x-logobar').outerHeight();
  var $combineHeight  = $navbarHeight + $topbarHeight + $logobarHeight;

  $('.masthead.masthead-stacked').css( 'height', $combineHeight );
  }
});

Let us know how this goes!

[SebamoeParticipant]

Thanks, this fixed the scroll positioning! However, I still haven’t found a solution for the missing highlighting of the current section in mobile..any ideas??

[RadModerator]

Hi there,

Active statuses for one page navigation is only applicable for desktop menu. Mobile menu is not really made for fixed positioning so highlighting while it scroll is not possible.

Thanks!

[Author]

Posts