Mobile Menu - scrolling issue

Support
#1

The mobile menu is really difficult to scroll through. It’s so bad I am certain it will prevent the launch of the site. I’ve been testing with an iPhone 15 Pro running iOS 18.1.

thx

#2

Hello @brocknessmonster,

I have tested it on my iPhone 14 (iOS 18.1) Google Chrome and it seems that the menu is working fine on my end. I would suggest you please purge all the cache of the browser and recheck it

Thanks

#3

@prakash_s thanks for posting that test. Appreciate it.

When I open the menu and scroll down the menu it fights me.

#4

Hey @brocknessmonster,

It seems that you have a custom JS script applied to the site menu:


/* <![CDATA[ */

document.addEventListener("DOMContentLoaded",()=>{
  /* first level icons only */
  jQuery('div.x-dropdown ul > li.menu-item').click((e)=>{
    if (window.innerWidth < 768) {
      let targetEl;
      if (e.target.classList.value.trim() == 'x-anchor-text-primary') {
        // parent
        targetEl = e.target.parentNode.parentNode.querySelector('i.x-anchor-sub-indicator');
      } else if (e.target.classList.value.trim() == 'x-anchor-text') {
        // parent
        targetEl = e.target.parentNode.querySelector('i.x-anchor-sub-indicator');
      }  else if (e.target.classList.value.trim() == 'x-anchor-content') {
        targetEl = e.target.querySelector('i.x-anchor-sub-indicator');
      } else if (e.target.classList.value.trim() == 'x-anchor-sub-indicator') {
        targetEl = e.target;        
      }
      console.log('target el ',targetEl);
      console.log('pre transform val - ',targetEl.style.transform);
      if (targetEl.style.transform == '') {
        targetEl.style.transform = 'rotate(0deg)';
      } else if (targetEl.style.transform == 'rotate(-90deg)') {
        targetEl.style.transform = 'rotate(0deg)';
      } else if (targetEl.style.transform == 'rotate(0deg)') {
        targetEl.style.transform = 'rotate(-90deg)';
      }
      console.log('transform - ',targetEl.style.transform);

    }
  });
  /* nested level icons only */
  jQuery('div.x-dropdown ul li.menu-item ul > li').click((e)=>{
    if (window.innerWidth < 768) {
      let targetEl;
      if (e.target.classList.value.trim() == 'x-anchor-text-primary') {
        // parent
        targetEl = e.target.parentNode.parentNode.querySelector('i.x-anchor-sub-indicator');
      } else if (e.target.classList.value.trim() == 'x-anchor-text') {
        // parent
        targetEl = e.target.parentNode.querySelector('i.x-anchor-sub-indicator');
      }  else if (e.target.classList.value.trim() == 'x-anchor-content') {
        targetEl = e.target.querySelector('i.x-anchor-sub-indicator');
      } else if (e.target.classList.value.trim() == 'x-anchor-sub-indicator') {
        targetEl = e.target;        
      }
      if (targetEl.style.transform == '') {
        targetEl.style.transform = 'rotate(0deg)';
      } else if (targetEl.style.transform == 'rotate(-90deg)') {
        targetEl.style.transform = 'rotate(0deg)';
      } else if (targetEl.style.transform == 'rotate(0deg)') {
        targetEl.style.transform = 'rotate(-90deg)';
      }
      console.log('transform - ',targetEl.style.transform);

    }
  });
});
/* ]]> */

You may need to temporarily remove the code or consult the original source of the JS code.

Be advised that custom JS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

#5

I removed the custom JS and CSS and repeated the experiment. The menu is still pretty buggy. Feels like it’s fighting me. iPhone 15 w iOS

thank you for your help

Edit: when I make the header not Sticky the menu stops fighting me. Maybe I’ll have to accept that?

#7

Even with the custom css and js removed the mobile menu is still very problematic and buggy.

#8

I would try setting the dropdown settings to “Inline” and “Inline Fixed” and see if that helps. Have a great day.

image

#9

Thanks for the suggestions but I’m not seeing those options in my builder.

Update: I found those settings but the changes didn’t improve performance. It may be worse now.

#10

Hey @brocknessmonster,

In this case, instead of using the Navigation Collapsed element, please consider using the Navigation Layered element. The Navigation Layered was developed to accomodate numerous menu items that you have now. The Navigation Collapsed is not a good choice for numerous menu items because it allows the opening of individual submenus whereas the Navigation Layered does not allow that. As a result, your menu is tidy and you won’t have to scroll the menu.

#11

Slight improvement but still buggy

#12

Hey @brocknessmonster,

In this case, the last resort would be to change the Dropdown element with the Off Canvas. The reason for this is for your menu to take the full length of the mobile screen. Still use the Navigation Layered within the Off Canvas element.

#13

Good idea. We’re going to use this I think. Thanks.

#14

Hey @brocknessmonster,

You’re most welcome!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.