Can't scroll in burger menu on phone to get at lower/hidden menu items - Support

Tagged: burger, does not scroll, inaccessible, menu, menu items, scroll

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
January 12, 2024 at 7:35 am #1429864
garysch37
Participant
Dear Support Team:

I am almost ready to publish my new website, but in testing I am unable to scroll through my menus & submenus in the burger menu on my iPhone or via mobile emulation on my Mac. Because I can’t scroll down, only the topmost menu items are visible and accessible. This issue has come up for me throughout development, but I just postponed solving it until now. Clearing browser cache for my website on the devices I’m testing this on doesn’t help.

You can see what I mean in this illustration: https://www.dropbox.com/scl/fi/3fvermfa0p8o2lwltl1dj/scrolling-broken-in-burger.png?rlkey=abni1zusq7240arrhptb3rsts&dl=0

On the left in the illustration is the starting situation, where I can’t scroll down to reveal the last menu item, Contact. On the right, after opening the Services submenu, I can’t scroll down to reveal the last few pixels of the Relines & Rebases submenu item, the remaining 3 submenu items after that, and the bottom 3 main menu items: all of those are inaccessible to me.

This happens on both my iPhone X itself, as well as using DevTools’ mobile emulation in Chrome on my Mac (Developer Tools > Device Toggle Bar > choosing the mobile device under the Responsive menu to auto-set the dimensions for that device), whether I choose my iPhone X or an Android device (e.g. Samsung Galaxy S8+).

On a PC (in e.g. Windows 7), I don’t have a problem using the Chrome mobile emulator: I can scroll. I haven’t tried on an actual Android phone, but it certainly doesn’t work on my iPhone. I’m wondering if this is an Apple issue with Enfold/Avia.

Do I need an “overflow-y: auto;” somewhere, somehow? I tried it here, but that didn’t work:
```
#top #av-burger-menu-ul {
   padding-top: 0 !important;
   overflow-y: auto !important;
}
```
Any help would be appreciated.

Thanks,
Gary
- This topic was modified 6 months, 2 weeks ago by garysch37. Reason: Trying the full URL with parameters from my Dropbox because without the parameters it forced the user to log into Dropbox
January 13, 2024 at 1:31 pm #1429980

Mike
Moderator

Hey Gary,
Thank you for your patience and the link to your site, I don’t have a iPhone but I checked you page with my Android and the menu scroll worked only sometimes and only a little when it did work. When I used the Chrome Dev Tools, it also only works sometimes, compared to our demo site which has a very long mobile menu which works correctly.
When I check your site I first see this error: Uncaught SyntaxError: Unexpected token ';' (at denture6/:83:51)

I also see this error: Uncaught (in promise) InvalidValueError: Map: Expected mapDiv of type HTMLElement but was passed null.
an when I try to scroll in your menu this error occurs hundreds of times: Unable to preventDefault inside passive event listener invocation.
So I believe that these javascript errors are causing your scroll issue, I recommend first removing your custom javascript and try you get your page a have no errors, then I believe the issue will be solved.
Then try adding your javascript back one at a time and solve errors as you find them.

Best regards,
Mike

January 16, 2024 at 4:46 am #1430193
garysch37
Participant
Hi Mike!

Thank you for your feedback.

So I fixed the two errors you mentioned and I’m not seeing any other errors…

…except when I have a mobile-sized window in the DevTools, open my burger menu, and use my mouse to scroll. This causes multiple errors all saying:
```
Unable to preventDefault inside passive event listener invocation.
   jquery.min.js?ver=3.7.1:2
```
I tracked down where Enfold/Avia enqueues this file–in: config-layerslider/LayerSlider/assets/wp/scripts.php. Searching the web for this error message gives possible solutions, like removing the call to preventDefault(). But I sure as heck don’t want to mess with the Ajax libraries.

I’m not sure if this is related to my inablity to scroll in my burger menus or not. Since I’m able to scroll through your demo’s burger menu, I assume there is something else in my code that is preventing me from scrolling.

However, note that this same preventDefault error does appear even in your demo’s burger menu if I scroll past the bottom of it, and multiple instances of the error are displayed as I continue to try to scroll past the bottom of your burger menu. But the preventDefault error appears for my website even if I’m not at the bottom–since I can’t even see the bottom.

Any help would be appreciated.

Thanks,
Gary
January 16, 2024 at 3:07 pm #1430709

garysch37
Participant

Actually, come to think of it, the fact that my burger menu doesn’t scroll makes the bottom menu item in the window the de facto bottom of my menu, so that preventDefault error triggering as soon as I try to scroll makes sense (vis-à-vis your demo menu), so it’s probably an irrelevant error.

January 16, 2024 at 5:10 pm #1430734

Mike
Moderator

Hi,
Ok, I thought it would be pointing to the issue on your site, I would recommend disabling your customizations and plugins and disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression for good measure and see if that helps, since the scrolling works on our demo site and my test site.

Best regards,
Mike

January 17, 2024 at 3:09 am #1430767
garysch37
Participant
Hi Mike!

Thanks for that suggestion. I was thus able to find the stylesheets responsible:

(1) For the purpose of my bullets, I did a:
```
ul {
   padding-bottom: 0;
}
```
but that also affected my menus, since Enfold/Aria implements the menus using unordered lists. So I removed that line. This was the main culprit preventing scrolling in the burger menu (for some reason).

(2) In addition, many months ago in my development I made my burger menus responsive to HEIGHT of the window too (i.e. in addition to all my general responsiveness to width everywhere). Somewhere along the way that code stopped working without my realizing it (because it originally worked), and so I just redid the breakpoints and CSS code. For example:
```
@media only screen and (max-width: 614px) and (min-height: 900px) and (max-height: 999px) {
   #top .av-burger-overlay {
      margin-top: 160px !important;
      height: 730px !important;
   }
}
```
Thanks for all your help. I can’t tell you how relieved I am that this problem is fixed. That was the last thing stopping me from publishing (I hope). You can close this topic if you wish.

All the best,
Gary
January 17, 2024 at 1:11 pm #1431277

Rikard
Keymaster

Hi,

Great, I’m glad that Mike could help you out. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts