OnePage navigation with Header Builder Pro Final fix

[PeO912]

I am aware of that the onepage-feature isn’t implemented in pro yet… but I really need it to work =)
Currently I have followed some tips and trix in this forum to get it almost working =)
But on the phone something strange happens =(

It works as expected as long as I don’t manually scroll the content with my finger(swipe up and down).
If I do this the onepage navigation stops working.

So if I use the navigation directly after page load(without scrolling the page) then it’s working.
I can use the onepage navigation over and over again as long as I don’t scroll the page with my finger.

As soon as I do this the onepage navigation stops working.

Do you have any clue or idea why this is happening and maybe a solution to overcome it?

Link to dev-site:

ColdZyme SE

Thanks in advance
//PeO

[rad]

Hi there,

Thanks for writing in.

One page navigation is not applicable for mobile and even on X theme. But I checked it and scrolling is working on my end, would you mind providing a video recording? I’m not sure if I fully understand the description about swiping. What device you’re testing this with?

Thanks!

[PeO912]

Here comes a link to a video that show you the problem =)
ShowVideo

[rad]

Hi there,

But it doesn’t have sub-menu even by viewing the source code. What’s in your video is the same as what I see, I just thought there was a sub-menu that won’t open by clicking the parent. Would you mind providing your login credentials in a secure note? I’ll check your current menu setup.

Thanks!

[PeO912]

Here it comes

[rad]

Hi there,

I tried and it’s not currently possible, to do that, you have to unregister all attached events on the menu and re-add them to perform a toggle click. If you wish to do that then you may consult it to a developer. OR, simply add multiple modal menu/content in your header (but hidden), then have your main navigation that supposed to have sub-menu to trigger the modal menu/content. That way, even if it scrolls and close, the modal menu will surely pop up. But again, it still requires jQuery customization but not hard similar to the first option.

Thanks!

[PeO912]

Well Rad… I’m not really following you here. I don’t have a sub-menu. I have a “menu collapsed” that only shows on mobile… and it opens and closes as expected. No problem there.

The problem however is this:
The anchor-links within the “menu collapsed” stops working after I manually scroll through the content with my finger on the phone.

Step 1:
Reload the page on a phone.
Use the Hamburger-icon to open up “menu-collapsed”.
Navigate to a section on the page bu clicking on one of the anchor-links in the “menu-collapsed”.
The “menu-collapsed” closes and take you to the selected section.
This works just fine and you are now at the desired section.

Step 2:
After been scrolled down to the corresponding section in step 1… use your finger to scroll through the page.
Now open the “menu-collapsed” again by clicking on the Hamburger-icon and click on one of the anchor-links just like in step 1.
The “menu-collapsed” closes as expected… but it will NOT take you to your selected section.

IMPORTANT!
I discovered is that if I use the scroll to top arrow (bottom right corner of the page) it will take me to the top of the page… and after that the anchor-links in the “menu-collapsed” works again.

So what happens i the “x_scroll_top_anchor” - function that makes the achor-links work again?

I have applied this code to close the off-canvas-content:
jQuery(function($) {
$(’.x-menu-collapsed .x-anchor’).on( “click touchstart”, function() {
console.log(‘x-menu-collapsed’);
$(’.x-off-canvas-close’).click();
});
});

Thanks again!

[PeO912]

I got it working if I inject this inside the above jQuery-function in global.js:
$ownScroll = $(this).attr(‘href’);
$(‘html, body’).animate({ scrollTop: $($ownScroll).offset().top }, 850, ‘easeInOutExpo’);

But now it fires animate twice… in step 1… but it’s working now… don’t ask me why?

[PeO912]

This is the final code to get the OnePage working including offset so content doesn’t get hidden behind nav-bar =)

  jQuery(document).ready(function($) {
    $('.x-menu-collapsed .x-anchor').on( "click touchstart", function(e) {
        e.preventDefault();
    	$('.x-off-canvas-close').click();
    });

    $('a[href*="#"]').on('click touchstart', function(e) {
    setTimeout ( function() {
      e.preventDefault();
      var hash = '#' + $(this).attr('href').split('#')[1];
      if ( hash == '#' ) return false;
      $('html, body').stop().animate({ scrollTop : $(hash).offset().top - $('.x-bar-fixed').height() });
    }, 500 );
  });

});

[rad]

Hi there,

Glad it’s working now, yes, you have to stop animation first before calling another animate.

Thanks!

[simeoned]

Solution: Offset anchor using one page navigation and sticky header together

[christopher]

Hi there,

Thank you for your contribution