I’m not sure what’s happened, whether one of you kind folks did something to fix my problem of clicking my Contact menu item on my iPhone not working, or something else magically happened (I did nothing to affect this fix as far as I know), but it’s now working.

So I can accept using Enfold/Avia’s method doing the burger menu, which now at least is functional on my iPhone (and I assume on Android phones) in portrait orientation. So unless anyone can help me make my method of doing the burger overlay, moving the top of it to under the burger icon (and my Search icon)–which if possible would be ideal and much appreciated–you can close this thread.

Thanks,
Gary

Hi Rikard,i’ve seen old URLs in the enfold_child.css – maybe that’s the problem. I thought maybe i can change the color scheme as a css snippet.

Do you know how i can change old (test) urls? Everything else was changed with Better Search Replace.

Thanks
Patrick

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

One last question though on Enfold. How can I remove the author name on the search results?

Hi Gunter,

Thanks a lot for the reply. Shame there’s no easier way to interact with this.

To help us further with this, can I ask how Enfold adds the search icon to the header so that it always stays in its position in the header both on desktop and mobile? Eg: on mobile it doesn’t get added to the hamburger menu, but rather sits next to it, which is what we want.

Thanks

Tim

I searched in the functions.php file with a CTRL F and only could find this code in the theme that has Avia.

See here: https://snipboard.io/n4LpIo.jpg

I’m going to give you access so you can go in there and see for yourself. I did deactivate the caching plugin.

TWO MAIN issues we are still having :
1) duplicate enfold themes installed.
2) on product pages still can’t get formatted correctly. No ability to do line breaks. It is all run-on sentences.

PLEASE HELP! There is definitely something buggy here.