Mobile Menu stuck

Hey aerobis,
Thank you for the link to your site, I have reviewed this issue on your site and found that if someone touches on the burger menu icon and drags it to the top it scrolls the page instead of the menu. This also occurs if the hidden Trust Badge container at the top of the menu is touched and dragged.
I tested the last 6 versions of the theme to see if this is a recent change causing this, but it is not. I believe the reason this is more apparent to you is that there is a lot of padding at the top of your burger menu moving the burger icon down 300px, when compared to the standard menu layout, and thus when the menu is opened the icon is right where someone’s thumb would go, at least for me.
So after testing a few possible solutions I found this to work the best, it will prevent the “dragging” of the icon but still allow it to be “clicked” should someone wants to, please add this code in the WordPress > Customize > Additional CSS field:

html.av-burger-overlay-active .menu-item-avia-special {
	touch-action: none !important; 
}

and please deactive your “Fast Velocity Minify” plugin and any other caching and then clear your browser cache.
I would also suggest reducing the space at the top of the burger menu so it’s less likely that someone will try to drag the icon when scrolling the menu.

Best regards,
Mike

Hi,
Thank you for the video, it is as I had thought. I checked your site again and see that you have included the css above and now the error doesn’t occur on Windows or Android, I will attach videos in the Private Content area. My videos show where the screen is being touched.
So I thought that this error was still occurring for you due to your browser cache, but as I look into it deeper I found that Safari doesn’t support touch-action So I tried to solve with z-index, but it didn’t work well. Perhaps if we move the icon back to the top of the screen it would solve the accidental issue, did you want the menu and icon so far down?
Another option would be to hide the close icon with display:none but that is really not a good option.
Please deactivate your “Fast Velocity Minify” plugin while we assist because it is duplicating some of your css rules, which could be causing errors on its own. Also, the Trust Badge container at the very top of the menu can be touched and drag the background page, so please disable that plugin also just so we can ensure we are not getting a leak from it.

Best regards,
Mike

Hi,
Please try moving the menu up a little, to do so first look in your child theme stylesheet for this and remove it:

/* Enfold mobile menu higher to top */
#top #av-burger-menu-ul {
	padding: 150px 0px !important;
}

then add this:

@media only screen and (max-width: 767px) {
.responsive.av-burger-overlay-active #top #wrap_all .main_menu {
    top: -70px !important; 
    right: -80px !important; 
}
.responsive.av-burger-overlay-active #top #av-burger-menu-ul {
    vertical-align: top !important; 
    padding: 35px 0 0 0 !important;
}
}

Then clear your browser cache and any cache plugin, and check.
Please see the screenshot in Private Content area of the expected results.

Best regards,
Mike

Hi,
Thanks for trying, I’m asking someone from the team to check with an iPhone, perhaps they will find a better solution.
Thank you for your patience.

Best regards,
Mike

Hi,

I am currently updating my IOS version to the latest. I will check once again and update you as soon as possible.

Regards,
Yigit

Hi,

Apparently this is related to changes made in the latest version of Safari as i can now reproduce the issue.
Could you please create temporary admin logins and post them here privately?

Best regards,
Yigit

Hi,

Thank you for the follow up. Try to remove the first selector in the previous css.

.av-burger-overlay-active {
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
}

This is what should happen after adding the code.

Screeshot: https://imgur.com/a/bjW7DYV

As you can see in the screenshot, only one scroll bar remains.

Best regards,
Ismael

Hi,

Sorry about that. We tried to create an overlay behind the mobile menu to cover the main container and hopefully prevent scrolling of the background layers, but it didn’t work. Seems to be an issue with the new iOS update as mentioned.

The issue has been reported to the dev team, so hopefully they will find a solution. We’ll get back to you once it is available.

Thank you for your patience.

Best regards,
Ismael

Hi!

Did you see my link I posted a while back? It can be solved with JavaScript event handlers!

Yes, we included that in the report and we are currently testing it because it looks promising. We’ll let you know.

Cheers!
Ismael