Docs

[Paul R]

Hi,

You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
   $('.x-navbar').bind('touchmove',function(e){
      e.preventDefault();    
});
});

Hope that helps.

[Saso Oven]

Hi guys,

tried the code above but it’s not working. I think the code below actually does it’s job ok but…

@media all and (max-width:979px){
.x-navbar-fixed-top-active .x-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-height: 100%;
overflow-y:scroll;
}
}

…the main problem is the touch area size for scroll.

If I touch and hold the part of my screen where the scroll bar is the menu always scrolls ok.
When i try to touch&hold on the blank part of the menu it rarely functions. I think it only works if I touch&hold the area between menu categories, so they don’t get selected while trying to scroll.

One solution would be to expand the area for scroll to about 70% of the menu and leave only the part of the area where categories are listed for selection/redirection.

The second solution would be to use the whole menu area for scroll and use touch/hold time to activate scroll. So if i press and hold anywhere on the screen once the menu is open it should only scroll, if i just touch it should select.

I don’t know how else to solve a problem with long navigation menu on mobile.

[Paul R]

Hi,

Let’s try another one.

You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
      $('.x-btn-navbar').on('touchend click', function(){
          $('body').toggleClass('noscroll');
      });
});

Then add this in Custom > Edit Global CSS

body.noscroll {
     overflow:hidden;
}

Hope that helps.

[Saso Oven]

Hi Paul,

unfortunately it doesn’t work 🙂
It’s not really the problem of scrolling the content behind the menu, the problem is when i touch&hold the menu to scroll it selects the category and scrolls to the part of the content which was selected (#) and closes the menu.

The only part of the screen where I can scroll the menu is the thin vertical area on the right (below the menu button where the scrollbar shows). 90% of the screen when the menu is open just selects and redirects as soon as i touch it to hold and scroll.

All the CSS code actually works correctly and does what it’s supposed to do, but only on a very limited area of the screen.

If you need video or images to help you understand the problem in detail let me know.

I am really sorry to bother you with this problem, it’s very frustrating for me too.
Hopefully X-theme developers will implement a navigation solution for such cases.
If it was my decision i would never go with so many categories in navigation menu.

Thanks

[Paul R]

Hi,

Thank you for the additional information.

In that case, we need to prevent the click on touchmove event.

You can add this in Custom > Edit Global Javascript

var iOs = agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0; 
var clickEvent = iOs ? 'touchend' : 'click';
var touchMoving = false;
if (iOs)
{  
  document.ontouchmove = function(e)
  {
     touchMoving = true;
  }

  document.ontouchend = function(e)
  {
    touchMoving = false;
  }
} 

$(document).bind('ready', function() 
{
  $('.mobile .x-nav a').bind(clickEvent, function()
  {
    if (touchMoving) return false;
    // your code here
  });
}

Hope that helps.

[Author]

Posts