Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #835329

    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 6 years, 7 months ago by gugler. Reason: Make 2nd bug description clearer
    #835702

    Hey gugler,

    Thanks a lot for sharing, much appreciated. We’ll have a look at it to see if it’s something we can add to a future release.

    Best regards,
    Rikard

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.