First Mobile Click not Opening Menu

Hi Rich,

Can you take off the ‘coming soon’ page so I can see the problem?

Sorry yep. Done.

Rich

Hi Rich,

Thanks. The sub menus are set to open on Hover at the moment. Please go to Appearance > Menus > Max Mega Menu Settings and set the Event to “Click”. Then the sub menu will appear on the first click, and the second click will go to the link.

Edit: correction, you have it set to first click opens sub menu, second click closes sub menu.

• This reply was modified 5 years, 11 months ago by megamenu.

I’ve updated that but it’s still a problem. That also affects the menu on desktop where I want it to be on hover, it’s just the mobile menu that I would like to be click?

Rich

Hi Rich,

Ah, ok, please set it back to Hover (the mobile menu should always be “click”) and I will take a look at the mobile menu now.

OK, done.

Thanks.

Hi Rich,

I think I see the problem. The menu html is copied/cloned (using JavaScript) into the slide out mobile container. However the events are not being cloned at the same time. When the menu is cloned to the slideout container, you either need to do that so that is clones the events too, or reinitialise Max Mega Menu once the menu has been copied:

jQuery('.mega-menu').maxmegamenu();

Thanks. I see what you mean. I’ll have a dig around the theme files and see what I can do but I should be able to check if the HTML exists when clicking the hamburger icon and then trigger the maxmenu JS if not.

Thanks.

Rich

Hi Rich,

I was just thinking the same:

jQuery(".mobile_toggle").on("click", function() { 
    alert('reinit mmm'); 
    jQuery('.mega-menu').maxmegamenu();  
});

. but it only works if the mobile menu has been previously opened. Hopefully the slideout menu script triggers an event once it’s done its thing, but everything is minified so I can’t really see. Otherwise it may need a timeout delay.

Great thanks. I’ll see if I can find the cleanest option, otherwise I’ll use a timeout delay.

Thanks.

jQuery(".mobile_toggle").on("click", function() { 
		var mob_menu = setInterval(function(){ 
			if (jQuery('.mega-menu').length) {
				jQuery('.mega-menu').maxmegamenu();
				clearInterval(mob_menu);
			}
		}, 1000);
	     
	});

is the best solution I’ve come up with.