Menu on touch devices like iPad

Hello (again)!

I have a question regarding the menu, and the way we can use it on an iPad.

Imagine I have a menu with sub-elements. On a computer, if I hover the parent, it will show the sub-elements and if I click on the parent, it will open the corresponding link.
But on iPad, it’s impossible to show the sub-elements: if we click to see the sub elements, it directly goes to the page.
This website (https://xtemos.com/forums/forum/basel-premium-template/) is a good example: it is impossible from an iPad to display the sub elements of the “Support forum” section.

I know we can set in the menu the parameter “open on mouse event : click”, but in this case, it is not possible anymore to click on the parent menu item to go to a specified page.

My question is: how to achieve a “mix” of both?
– On computer, I would like to be able to hover the parent item to show sub-elements, if I click on it or any other sub elements, I go to the right page
– On iPad/Mobile, if I click on the parent item, it displays the sub elements, and if I click a second time on the parent item, it goes to the page.

This is exactly like done here with another theme: https://avada.theme-fusion.com/construction/work/
If we click on “work” from an iPad, it will display the sub elements and on computer, we can still click on work and go to a page.

Can you help me on that?

Thank you in advance!

Any help?

Hello,

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

jQuery(document).ready(function() {
	jQuery('.menu-item').on('click', '> a', function() {
		if(jQuery(this).parent().hasClass('item-menu-opened')) 
			window.location.href = jQuery(this).attr('href');
	})
});

Regards

Hello,
Thank you for your answer.

This is almost what I want, I think you just missed one parameter.

With what you wrote, I need to put the menu item “open on mouse event = click” and I can click to open the menu and re-click to open the page.

What is missing is that I still would like the menu to open just on hover…
Once again, this example (https://avada.theme-fusion.com/construction/work/) is exactly what I want.

Thank you in advance.

We tested the code on our side and it works as described. Could you please provide us a link where we can see it in work on your website?

Ok, so:
– I added the code you sent to me at “Global custom JS”, from themes settings
– The first Menu element (Notre maison) has ‘open on mouse event = click’
– The first Menu element (Nos produits) has ‘open on mouse event = hover’

The correct one is “Notre maison”, but I would like its sub menu to open on hover.
On iPad, “Notre maison” works well (I need to click to see sub menu, and reclick to go to page).

Accès to website are below.

Thank you!

We just tested and it works correctly for both links in the menu https://gyazo.com/a34d7fb8c175c99bf8101e678a2bb70b

This is strange: I see you success and I guess you tried with the inspector of your browser.
I tried myself with Google Chrome Inspector, and it works well as expected.

But, on a real iPad, it still doesn’t work… If I click on “Nos produits”, it doesn’t open the sub menu but goes to the page.
Do you have any chance to test on a real touch device?

My test is done on an iPad Pro 10.5, iOS 11.

Thank you 🙂

Now we got it. Try to replace the code with this one

jQuery(document).ready(function() {
	jQuery('.menu-item').on('click', '> a', function() {
		if(jQuery(this).parent().hasClass('item-menu-opened')) 
			window.location.href = jQuery(this).attr('href');
	})
var menuForIPad = function() {
	mainMenu = jQuery('.basel-navigation').find('ul.menu'),
	if( jQuery(window).width() <= 1366 ) {
		mainMenu.find(' > .item-event-hover').each(function() {
			jQuery(this).data('original-event', 'hover').removeClass('item-event-hover').addClass('item-event-click');
		});
	} else {
		mainMenu.find(' > .item-event-click').each(function() {
			if( jQuery(this).data('original-event') == 'hover' ) {
				jQuery(this).removeClass('item-event-click').addClass('item-event-hover');
			}
		});
	}
};

jQuery(window).on('resize', menuForIPad);

});

Oups, still doesn’t work…

I have errors on the code: “Unexpected ‘if'”, at line 9 (see screenshot).

Maybe it’s the reason?

Thanks,

Attachments:

You must be logged in to view attached files.

Sorry, try to replace with this one

jQuery(document).ready(function() {
	jQuery('.menu-item').on('click', '> a', function() {
		if(jQuery(this).parent().hasClass('item-menu-opened')) 
			window.location.href = jQuery(this).attr('href');
	})
var menuForIPad = function() {
	var mainMenu = jQuery('.basel-navigation').find('ul.menu');
	if( jQuery(window).width() <= 1366 ) {
		mainMenu.find(' > .item-event-hover').each(function() {
			jQuery(this).data('original-event', 'hover').removeClass('item-event-hover').addClass('item-event-click');
		});
	} else {
		mainMenu.find(' > .item-event-click').each(function() {
			if( jQuery(this).data('original-event') == 'hover' ) {
				jQuery(this).removeClass('item-event-click').addClass('item-event-hover');
			}
		});
	}
};

jQuery(window).on('resize', menuForIPad);

});

[Author]

Posts