Text and field in submenu isn't clickable. http://www.boom-sales.com/

[BOOM_Tommy]

Hi,

When the screen gets smaller, the menus disappear and the menu button appears, which you need to click to see individual menus. See picture.

My problem is that when clicking on the NAME of a menu with SUBMENUS, placed on the left hand of the screen, the screen flips back to previous view, instead of showing the set of submenus. The only way to see the submenus, is to click precisely on the two down pointing arrows on the far right hand side of the screen.

Is there a way for me to make the NAME of a menu with SUBMENUS clickable, as well as the whole FIELD within the two horizontal boarders – all the way to the two arrows on the right hand side? To show the set of submenus when clicking.

It would avoid people getting trapped in a loop between trying to open a submenu and bounce back to the first view.

Cheers,
Tommy

[rad]

Hi there,

Thanks for writing in.

Please add this code to your global custom javascript.

jQuery ( function($) {

$(document).on('click', '.x-nav-wrap.mobile .menu-item-has-children > a', function(e) {

e.preventDefault();

if ( e.delegateTarget === this ) {

$(this).find('.x-sub-toggle').click();

}


} );

} );

Thanks!

[BOOM_Tommy]

Many thanks Rad,

It’s great that the screen doesn’t flip back to previous view, when clicking on the NAME of a menu with SUBMENUS (“TJÄNSTER” and “BLOGGAR”).

Is there a way to also make the headings “TJÄNSTER” and “BLOGGAR” clickable, as well as the whole FIELD within the two horizontal boarders – all the way to the two down pointing arrows on the right hand side?

This would make the menu more intuitive and consistent, when you can click on all headings to either unfold a new page, or a submenu. And not having to move the pointer to the right hand side of the screen to click on the arrows to see the submenus.

Have a nice weekend,
Tommy

[nabeel]

Hey Tommy,

Thanks for writing around! Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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

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

[BOOM_Tommy]

Many thanks Nabeel,

Great! The “TJÄNSTER” and “BLOGGAR” are clickable, as well as the whole FIELD within the two horizontal boarders – all the way to the two down pointing arrows on the right hand side.

It stops working however, when you click on the down pointing arrows. First of all, nothing happens when you click on the arrows. Second, after you have clicked on the arrows to the right of “TJÄNSTER”, then the submenus of that particular main heading will be presented strangely. Se screenshot. The function of the other main heading “BLOGGAR” still works, till you have clicked on the arrows to the right of that heading.

Would it be a solution to remove the two down pointing arrows completely? I don’t think that they serve a purpose any longer, only mess things up.

Have a nice evening,
Tommy

[lely]

Hi Tommy,

What you describe above is different from what I experience in your site: https://screencast-o-matic.com/watch/cbX3hG2OtR

Double down arrows can be hidden using the following custom CSS:

.x-sub-toggle {
    display: none;
}

Since this is getting more on customization, further changes from is outside the scope of our support. Thank you understanding.