Expand Mobile Menu by clicking on the row

[8BITdigital]

Is it possible to get the mobile menu to expand and show the sub menu items without the need to click directly on the arrow icons I want the menu to expand when the user clicks anywhere in the row as many users don’t realize that they need click the tiny arrow icon to expand it.

[Alaa]

Hi 8BITdigital,

You can do that by adding this JS snippet to (X > Theme Options > JS):

jQuery(document).ready(function(){
	jQuery('#x-nav-wrap-mobile li.menu-item-has-children').each(function(){
		jQuery(this).on('click', function() {			
			jQuery(this).toggleClass("x-active");
			jQuery(this).find('.x-sub-toggle').toggleClass("collapsed x-active");
			jQuery(this).find('ul[id*="x-nav-wrap"]').toggleClass("x-collapsed");
		});
	});
});

And this CSS snippet to (X > Theme Options > CSS):

li.menu-item-has-children .x-sub-toggle {
    z-index: -1;
}

As this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. Were happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.

Thanks.

[8BITdigital]

@Alaa

li.menu-item-has-children .x-sub-toggle {
z-index: -1;
}

Works perfectly. Thank you!

[Alaa]

You are welcome