Docs

[Rad]

Hi there,

When is it altered? Please always keep a backup of your site before troubleshooting.

Since you don’t want the content covered by menu, then there should be no fixed positioning. Please remove this CSS,

@media (max-width: 979px) {
    .masthead {
        position: fixed;
        top: 0;
        z-index: 9999;
        width: 100%;
    }
}

and this javascript

jQuery ( function( $ ) {

$('.x-navbar .x-nav-wrap.mobile .x-nav > li > a').off('touchend touchstart click').on('click', function () {

$('.x-btn-navbar').trigger('click');

    var target = $(this);

    setTimeout( function() {

      $('html,body').animate({scrollTop: $( '#' + $(target).attr('href').split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height() },700 ,'swing');

    }, 300 );

} );

Then add this code to Admin > Appearance > Customizer > Custom > Javascript.

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

$('.x-nav-wrap.mobile > .x-nav > li > a').off('touchstart touchend click').click(function(e){
    e.preventDefault();
   
    $('html,body').stop().animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top
    },700 ,'swing');
  });

} );

});

Make sure the first set of CSS and javascript are properly removed, or it will not work.

Thanks!

[barneyibbotson]

Thanks Rad.
All good apart from the following issues:
1) The mobile menu doesn’t collapse after the one-page navigation scrolling takes place. When I use the back-to-top button I can see the menu still expanded.
2) The one-page navigation still doesn’t scroll to the correct anchor point, but to a point quite a few pixels beneath it.

Regards,
Barney

[Rad]

Hi there,

I updated your code to this,

jQuery(function($) {
  $('.x-feature-box-text a:last-child').each(function() {
    $(this).closest('.x-feature-box').find('.x-feature-box-graphic-inner').wrap('<a href="' + $(this).attr('href') + '"></a>');
    $(this).remove();
  });
});

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

$('.x-nav-wrap.mobile > .x-nav > li > a').off('touchstart touchend click').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.x-btn-navbar').trigger('click');
       $('html,body').stop().animate({
          scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top +  100 + (  $('.x-btn-widgetbar').height() + $('#wpadminbar').height() )
        },700 ,'swing');
       });
  
} );

});

It should be okay now, cheers!

[barneyibbotson]

Thanks Rad – nearly there!
The menu now operates correctly, but I still have the issue of the page not scrolling to the exact anchor point. it is still a few pixels beneath the intended point.
Cheers,
Barney

[Friech]

Hi Barney,

I just checked the site and I can’t replicate the issue, the scrolling stops at the right section. Are you login when testing that? Try disabling the adminbar or try to logout because sometimes its just the adminbar that is causing that, since it is not included in the calculation.

Thanks.

[barneyibbotson]

Hi Friech
I’m testing on mobile, so not logged in. Scrolling works fine on desktop, just not on mobile (Safari and Chrome on iPhone). Scrolling should go to the very top of each header image.

I have attached screenshots of the issue from the page: ‘new.flowskate.co.uk/flowskate’ after clicking on ‘Roller Discos’.

‘File_000.png’ (Attachment 1) is where it scrolls to.
‘File_001.png’ (Attachment 3) is where it should scroll to.
(Ignore attachment 2)

Regards,
Barney

[Paul R]

Hi Barney,

Please set all your sections padding top and bottom to px instead of percentage.

It is messing up with the offset value which makes the scrolling to your target section impossible.

Thanks

[barneyibbotson]

Thanks – it’s pretty much working now (still out by a few pixels but as good as it’s going to get, I think.)

[Joao]

Hi There,

Let us know if you need further help.

Joao

[Author]

Posts