Mobile menu

Hello. Before buying, we talked with you about the mobile menu.

“Hello.
Is it possible in your theme to change in the mobile menu the opening of a submenu by clicking on the parent menu, and not on the arrow on the right. Because in your demo and in the examples of your customers, when you click on the parent menu in the menu, you go to the parent menu page. In your documentation, we also did not find it possible.”

and you answered :
“Hello,
There is no such option in our theme but we may help you with a simple code fix to change the menu behavior. Contact us after purchase via our support forum and we will help you.

How could we implement this?

Hello,

Thank you so much for purchasing our theme and contacting our support center.

Try to add the following code snippet to the Custom JS area on document ready in Theme Settings to do this

jQuery('.site-mobile-menu').on('click', '.menu-item-has-children  > a', function(e){
	e.preventDefault();
	jQuery(this).parent().find('> .icon-sub-menu').click();
});

Kind Regards

Hello.
Thank you for your beautiful theme.

Is it possible to make it work just on the first click? And on the second click there was a enter in category. We just have a multi-level menu and in your decision the possibility of switching to the parent menu disappears altogether.

Thank you!

There is a problem with the display in the mobile version. can this be somehow fixed?
Screenshots:
https://ibb.co/QvS7d5r
https://ibb.co/phg335t

And one more:
https://ibb.co/XzGT4kg

Try to replace the previous code with this one

jQuery('.site-mobile-menu').on('click', '.menu-item-has-children  > a', function(e){
	if( ! jQuery(this).parent().hasClass('opener-page') ) {
		e.preventDefault();
		jQuery(this).parent().find('> .icon-sub-menu').click();
	}
});

It seems that there is no enough space for such tables when you have two columns on mobile. If you want, you can hide this information by adding the following code snippet to the custom CSS section in Theme Settings for mobile devices

.hover-content-inner .woocommerce-product-attributes {
    display: none;
}

jQuery(‘.site-mobile-menu’).on(‘click’, ‘.menu-item-has-children > a’, function(e){
if( ! jQuery(this).parent().hasClass(‘opener-page’) ) {
e.preventDefault();
jQuery(this).parent().find(‘> .icon-sub-menu’).click();
}
});

This code works as it should. Excellent! Thanks a lot!

And for this:

.hover-content-inner .woocommerce-product-attributes {
display: none;
}

I would like this information to be displayed. We will think about it.

OK, contact us when you will have any questions.

[Author]

Posts