Bottom parts of submenus hidden/inaccessible in mobile burger menu’s overlay

Hi Yigit!

Thanks very much for replying and with your possible solution. But it didn’t work. I’ve included in the private section a permanent link to a video in my Dropbox illustrating the issue, and here is a permanent link to a public image in my Dropbox containing 6 screenshots of my iPhone (Figures 1-6) that I refer to: https://www.dropbox.com/s/mkf28lwx4jauqf4/Menus%20issues%20on%20iPhone%2020230420.jpg?dl=0. But here it is in writing as well:

To me at least, it seems Enfold implements the burger menus/submenus in a bizarre way, creating empty gaps above & below the main burger menu to handle opening up submenus: Enfold’s burger menu overlay covers the entire vertical window space (on computer) & screen space (on mobile), and they put the first menu item correctly below the burger menu, leaving a big gap from the top of the screen/window (& overlay) to that first menu item (Figure 1) (I have chosen the Sidebar Flyout Menu (Classic) as the Menu Overlay Style in the child theme’s settings). Then when the user opens a submenu, instead of just opening the submenu under it’s parent menu like every other website implementation does, everything shifts up to the top of the screen (& overlay), filling in that big gap AND going underneath the burger menu icon (& my search button) on the z-axis (z-index-like) (Figure 2). In my expert opinion (I’ve done post-graduate MSc work in human-computer interaction (UX)), that is not good for the User Experience.

So using responsive widths & heights, I decided to change the overlay margin-top & height so it’s always beneath the burger menu icon (& search button) (Figure 3), even when a submenu opens up (Figure 4). But if I do that, when a long submenu like for my Services menu opens up on a mobile device (well, I only tested on my iPhone), the bottom submenu items and the rest of the lowest parent menu items under that submenu become inaccessible, as the first part of my video demonstrates (sorry to other readers: I don’t have the video public). What’s happening is that the iPhone’s rubberband effect snaps to the 3rd last menu item, Patient Information, instead of the last menu item, Contact, making Contact and the FAQs menu item above it inaccessible for tapping. You can also see this in Figure 5, which shows that when I scroll to the bottom and let my finger go, the “rubberband effect” snaps the menu back to display Patient Information at the bottom of the screen, instead of the Contact menu item.

Just as an aside: You can see in Figure 5 that Permanent Soft Liners on New & Old Dentures is highlighted: that’s not because I chose it (we’re still on the home page as you can see in the breadcrumbs (btw, I haven’t finished the breadcrumbs margins)), but because my finder happened to gently touch it as I swiped up to scroll down. That seems to be a bug in Enfold (I see it also in the Enfold demos, but not on any other website using my phone, even other websites made using WordPress).

Back to our main problem: Actually, then another bug appears. If I attempt to scroll down a second time again, the outer window (the webpage content underneath the overlay) scrolls instead of the contents in the overlay, i.e. the menu. To me it seems overall that the code in avia-snippet-hamburger-menu.js is buggy.

So as a compromise (unless you have a solution for this issue), I thought I’d just not change the overlay margin-top & height on actual mobile devices (hover: none), but just do it on computers (hover: hover) when the user decreases the window size to a burger width (or starts at that width with his web browser window):

@media only screen and (max-width: 614px) and (min-height: 1px) and (hover: hover) {
    #top .av-burger-overlay {
        /* Start the overlay/flyout below the burger icon. */
        margin-top: 195px;/*215px; >>>  */
    }
}

In other words, leave it alone on mobile and go back to Figure 1 & 2. But doing that opens another problem I discovered. The rubberband effect works fine now, allowing me to scroll to the bottom of the menu and snap back to the bottom (Figure 6). But now when I tap the Contact menu item, instead of opening its submenu, it closes the burger menu entirely (the overlay disappears). If I open the burger menu again, scroll down to the bottom, and try tapping Contact again, the same thing happens. If I open the burger menu again, close the Services submenu, and tap the Patient Information submenu, and try tapping the Contact menu, it again does the same behavior. If I open the burger menu again, close the Patient Information submenu, and tap the FAQs submenu, and tap the Contact menu, this time it opens the Contact submenu correctly.

Any help would be appreciated.

Thanks,
Gary