Mobile dropdown menu should be clickable

[ShahzadArif]

Hi team,

On mobile, sub-menu don’t open when user clicks on the name of the menu. Users have to specifically click on the downward arrow icon to open the sub-menu. It becomes very confusing for the website users as most of the time they are clicking on the name of the menu.

Need your help to make the name clickable as the arrow on mobile menu.

[paul.r]

Hi,

To make it open by clicking on the menu, you can add the code below in Theme Options > CSS

.x-nav-wrap.mobile .x-sub-toggle {
    width: 100%;
    text-align: right;
}

.x-nav-wrap.mobile .x-sub-toggle .x-icon-angle-double-down {
    margin-right: 10px;
}

Hope that helps

[ShahzadArif]

Hi,

I follow the instruction. But it did not work.
CSS code is saved in Theme Option > CSS. You can check the result on mobile

[nabeel]

Hi again,

Try adding the following CSS code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.menu-item-has-children').on('touchend click', function(e) {
		$(this).find('ul').toggleClass('x-collapsed');
	});
	$('.x-sub-toggle').on('touchend click', function(e) {
		e.preventDefault();
		$(this).parents('.menu-item-has-children').find('ul').toggleClass('x-collapsed');
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[ShahzadArif]

Hi,

I removed the CSS code from Theme Options > CSS
and added above code in Theme Options > JS.

Cleared cache. But still no result. You may also check on your end as code is still there.
Just click on “Women” word and it should drop down.

[jade]

Hi there,

Please try this code instead:

jQuery(document).ready(function($){
	$('.menu-item-has-children > a span').on('touchend click', function(e) {
                e.preventDefault();
                var link = $(this).parent().attr('href');

                if( link == '') {
	        	    $(this).parent().next().toggleClass('x-collapsed');
                } else {
                    $(location).attr('href', link);
                }
	});

	$('.x-sub-toggle').on('touchend click', function(e) {
		e.preventDefault();
		$(this).parent().next().toggleClass('x-collapsed');
	});

});

Hope this helps.

[paul.r]

Hi,

Please let us know if you still need help on this,

Thanks

[ShahzadArif]

Hi,

It is resolved and working fine.

Thanks a lot for your quick and efficent support

[paul.r]

You’re welcome!