Fix for 4.1.2 Mobile Menu – No active state; overlay stays visible on resize

Hello,

I have experienced and fixed 2 bugs with the mobile menu in the new Enfold version:
1) the currently active page doesn’t receive any marking (class name .current-menu-item for example) in the menu anymore.
2) the mobile menu overlay stays visible when you resize the window to “desktop” size.

To fix these 2 problems, I have used this code:

jQuery('document').ready(function(){
	
	// Add current-menu-item active state to mobile menu item
	jQuery('.av-burger-menu-main a').on( 'click', function (e) 
	{
		var pathName = window.location.pathname;
		setTimeout(function() {
			jQuery('#av-burger-menu-ul .av-active-burger-items .sub-menu li a').each(function() {
				if ( ( jQuery('body').hasClass('home') == false ) && ( jQuery(this).attr('href').indexOf(pathName) > -1 ) ) {
					jQuery(this).parent('li').addClass('current-menu-item');
				}
			});
		}, 1000);
		
	});
	
	// Close mobile menu overlay on resize
	jQuery(window).on( 'debouncedresize', function (e) { 
		e.preventDefault();
		if ( jQuery('.av-hamburger').hasClass('is-active') ) {
			jQuery('.av-burger-menu-main a').trigger('click');
		}
	});
	
});

I hope this might help somebody else.
I have to say, I really like Enfold, but I think it’s a bit of a bold move to rewrite the whole avia.js / menu generating code without warning customers beforehand.

Have a nice day!

• This topic was modified 7 years, 4 months ago by gugler. Reason: Make 2nd bug description clearer