Problems with burger menu /mobile menu

Hello Ismael,
thank you for your support!

It wasn’t until you replied that I saw in the new Enfold demo, there isn’t even a need for the fix anymore, as the new Enfold already sets the preview image below the title. It was in some older version of the theme that it was set above.
So sorry, for the support request, which wasn’t necessary after all.

Yet I still need help with the second issue regarding the mobile menu.

If I click on a menu item with a lot of subitems I have to scroll the menu. But when I scroll, only the menu items scroll. The search icon and the close icon remain where they are and overlap with the menu items. How can I make the Icons scroll with the menu items?

Best regards,
zarlekin

Hello Ismael,
do I have to insert this code snippet into functions.php in the child theme?
Because I did that and nothing changed.
I also cleared the cache of WP Super Cache not knowing if this could be an issue, but still nothing changed.

Best regards,
zarlekin

Hi Ismael,
sorry, I thought the mobile menu worked fine now, but I had only taken a quick look by resizing the browser window and scrolling down.
Now that I took my mobile phone (Samsung Galaxy S3) and really testet it on the device it doesn’t work as expected at all.
When I touch the screen and scroll down, the icons disappear, but the moment I take my finger away and do this action again to scroll further down, the icons show up/flicker for a brief moment. And they also show up and overlap the menu item the moment I begin to scroll up.

In older versions of Enfold the whole mobile menu worked great. It worked similar to the mobile menu on this website using another theme: https://elisabeth-karsten.de/ – And in terms of best usability I think that’s the behaviour you should also expect.

Best regards,
zarlekin

Hello Ismael,
thank you for your support.

1. I looked into funktions.php and saw that you didn’t replace the old script with this new one shown above but added this new script below the old one.
Is the old script necessary for the new one to work, or did you forget to delete it?
Because I testet the mobile menu with and without the old script in functions.php and the menu worked the same way.
Therefor I deleted the old script.
Was I right to do this? Or did I miss something?

2. I compared the new script in functions.php with the script you posted here and saw a little difference.
In funktions.php your script had a line showing
}, this), 200);
In the script you posted above it shows
}, this), 500);
I don’t know what that is, but I changed this line it in functions.php to match with the script you posted here.
Was I right to do this? Or did I miss something?

—-

The new script is a big improvement. It’s not perfect, as the close button jumps and there is no way to position it to match the exact position of the menu icon, but it’s something I can live with. So thank you for that.

Yet, the problem with the Performance Options “Load jQuery in your footer” remains.

If I check the option “Load jQuery in your footer” the script doesn’t work properly and I get the error message:

Uncaught ReferenceError: jQuery is not defined
at (index):481

Referring to the line:
})(jQuery);

As you didn’t answer to my questions regarding this issue, I have to repeat them:

1. Is there a way to implement the script via child theme, that works with the theme performance option to load jQuery in the footer?

2. Will you have this mobile menu bug fixed in the new Update?

As I said, I can’t believe this mobile-menu-overlapping-behaviour to be deliberately designed this way, I see it as a theme bug. And I assume that you will fix this bug in the next theme update in a way compatible with the option to load jQuery in the footer.

Best regards,
zarlekin

Hello Ismael,
thank you very much for the script and the information! I will keep an eye on the Enfold changelog.

The Script now works without any errors :-)

Here the end version for other users who may need it:

add_action('wp_footer', 'ava_custom_script_mobile_menu', 9999);
function ava_custom_script_mobile_menu() {
?>
<script>
(function($) {
	$('.av-burger-menu-main').on('click', function() {
		var overlay = $('.av-burger-overlay');
		var active = $('html').hasClass('av-burger-overlay-active');
		var clone = overlay.find('.av-burger-menu-main');
		var wrap = $(this).parents('.av-main-nav-wrap').find('.av-burger-overlay').find('.av-burger-overlay-inner');
		
		if (clone.length == 0 && active) {
			setTimeout($.proxy(function() {
				$(this).prependTo(wrap);
			}, this), 50);
		} else {
			clone.insertAfter('#menu-item-search');
		}
	})
})(jQuery);
</script>
<?php
}

And this is the CSS customization I needed for my website:

.noLightbox.social_bookmarks.icon_count_2 {
    display: none !important;
}
.avia-menu.av_menu_icon_beside {
    padding-right: 0px;
    border: none;
}
#top .av-burger-overlay .av-burger-menu-main {
    position: absolute;
    right: 7.5%;
    top: 77px;
    z-index: 1000;
}
#top #wrap_all .av-burger-overlay .av-burger-menu-main a {
  border: 0;
}
.av-burger-overlay-active #top #menu-item-search {
  display: none;
}

Best regards,
zarlekin