Docs

[arthurodb]

I am having an issue with the One-Page-Navigation on a new site I am developing.

I have created a long page with many anchor-points running down it, and when using the built-in ‘Custom Menu’ widget in a custom sidebar, the anchor-point scrolling works as expected, smoothly moving to the right section and providing the offset correctly so the heading is still visible.

This same functionality does not work when using UberMenu, which is currently set as my main navigation, and also via the ‘UberMenu Navigation’ widget in the custom sidebar. I have managed to make the links scroll to the correct anchor (using the Scroll To option for each menu link) but it doesn’t calculate the same offset as the ‘Custom Menu’ X Menu does.

Currently this issue is occurring on the facilities page: http://odb.host/whitepost/facilities/ (log-in details will follow)

I have tried looking through the theme js files for the selector that may be missing the ubermenu links but picking up the x-menu ones but I haven’t been able to find it. Any help would be greatly appreciated, thanks

[arthurodb]

This reply has been marked as private.

[Joao]

Hi Arthur,

Please refer to this thread:

https://community.theme.co/forums/topic/possible-bug-ubermenu-incompatible-with-one-page-navigation-menu/page/2/

Let us know if you need help after checking the info provided on it.

Thanks

Joao

[arthurodb]

I was able to make the basic scrolling to anchor points work already, which seems to be the issue the other thread was having. My problem is that the scroll offset is not being calculated correctly for the UberMenu links, whereas using the normal x-menu (in a widget, or in the navbar) the anchor-point offset is calculated correctly.

I have attached two images. The first shows how the offset is calculated for the x-menu, with a nice gap below the nav lining the section up with the static floating navigation on the left.

The second shows how the offset is calculated for the UberMenu, with the heading almost being hidden by the nav (and on first page load, and then anchor-link press, this offset is even more out)

[Rad]

Hi there,

You have same issues from here https://community.theme.co/forums/topic/one-page-navigation-links-cut-off-top-of-section/

Ubermenu has no one-page navigation, the recommended code works. But not on your site, no matter what code I added, it’s not executed.

Perhaps use different menu on that page?

Thanks!

[arthurodb]

I was able to make the code work with the Ubermenu on that page by editing the code from that thread slightly. As the menu I am using has sub-menu items, I had to get rid of the ‘>’ after ‘.ubermenu-nav’ on line 3 to find all li > a elements, rather than just top level ones.

jQuery(function($){
  $(document).ready( function() {
    $('.x-one-page-navigation-active .ubermenu-nav li > a').on('click', function(e){
      e.preventDefault();
      e.stopPropagation();
      $('html,body').stop().animate({
        scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height()
      },850 ,'easeInOutExpo');
      console.log('scrolling...');
    });
  });
});

I also adjusted the animate length and easing for my preferences.

[Thai]

Glad you’ve sorted it out.

If you need anything else, please let us know 🙂

[Author]

Posts