One Page Navigation Question

[Pbalazs89]

Hi there,

I have one page nav set up for some of my pages. Thing is, I would like the scroll to go to the top of the given section.
For example, on this page: http://www.padthai.decorolux.com/gyik/

I have images at the top, but when I click on an element in the submenu, it scrolls to the middle of the image effectively cutting off the top of the image. How can I fix this? Thanks!

[paul.r]

Hi,

Thanks for writing in!

To fix it, you can add the code below in Theme Options > JS

// Setup ScrollSpy Functionality
// =============================================================================

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchend click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 160;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;

  if ( $('body').hasClass('x-navbar-fixed-top-active') ) {
      var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  } else {
      var navbarFixedTopHeight = $('.x-masthead').outerHeight();
  }
  
  $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);
  }


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

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      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, '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

[Pbalazs89]

Wow. That did the trick. Thanks!
1 more quick question. I have these submenus, and I added a margin-left: x%; to their container to position them closer to the middle. What I would really like to achieve is to have them start right under the main menu. So align it the the home button. Is there an easy / better way to do this?

Margin right might work here, but on other pages other submenus which have different length then won’t always position correctly.

Thanks!

[paul.r]

Hi,

To align it to your Main Menu, remove the margin-left you have added and add the code below in Header > CSS

.e1217-13.x-menu > li > .x-anchor .x-anchor-text {
    margin-left:0;
}

Hope that helps.

[Pbalazs89]

Hi @paul.r,

This works partially.

Here’s the thing, it looks like this on the desktop:

This is what I would like to achieve.

However, when I view it on my 15inch laptop:

It slides to the left. Is there a way to make it responsive?

Thanks!

[paul.r]

Hi,

Try to set it up the same as the main menu and add a transparent image(dummy) that is the same size as your logo.

Thanks