[khoriginParticipant]

Hi there,

I’m setting up a website with WPML, which adds a language switcher on the last item of the menu. The problem with that is that on some devices (Chrome on OSX), the hover works well when there’s a menu with submenu, however on some devices (Chrome on Windows), only clicking the parent menu will open the submenu.

Now for the usability issue, most people will click the current language on the language switcher, and so on the devices where hover works, that brings them back to the same page since there’s an href attached to the parent menu.

My question is: I’m wondering what’s the best way to make the sub-menu expand or collapse when clicking on the parent menu that has sub-menu. That means, no reloading of the current page. Currently, on most device, clicking the “English” menu twice will reload the page since the first click is thought to be “Expand Sub-menu” and the second click thought to be “I want the English (current) version).

Appreciate the help! Thank you.

Cheers!

[khoriginParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in?

What device you’re testing with Win10 and Chrome? Is it the hybrid (eg. laptop/desktop + touch feature )? Touch features are more prioritized in all kinds of touch devices, hence, the action you’re doing is interpreted as mobile touch actions even if it’s a laptop. Tablet with a keyboard is basically just the same as a laptop with a touchscreen.

I checked your site in my Windows 10 chrome and there is no issue with the hover.

Thanks!

[khoriginParticipant]

Hi Rad,

I used Chrome on Windows 10 and the hover is not working (clicking the English will expand the submenu though). From my gathering with a few users, it looks like the best usability design is to disable the hover altogether, so the submenu will only expand when the Parent is clicked.

As such, I’m wondering if it’s possible to disable the hover action (make it click only)? Also, I’m wondering if it’s possible to have the Submenu collapsed when the parent menu is clicked again on the language switcher (instead of refreshing the current page). This actually works perfectly on the mobile menu on my mobile phone, but I’m having trouble replicating it on the desktop menu.

Thank you.

Cheers!

[RadModerator]

Hi there,

May I know what device you’re testing it with? Because I don’t really see any issue with hover. But you may add this code to Admin > Appearance > Customizer > Custom > Javascript for language switcher.

jQuery( function($) {

$('.wpml-ls-current-language > a').off('touchstart touchend').on('click', function(e) { 

e.preventDefault();

$(this).parent().find('.sub-menu').toggleClass('open_sub');

} );

} );

And add this CSS to Admin > Appearance > Customizer > Custom > CSS

.wpml-ls-current-language:hover .sub-menu,
.wpml-ls-current-language.x-active .sub-menu{
display: none !important;
}
.wpml-ls-current-language .sub-menu.open_sub  {
display: block !important;
}

Thanks!

[khoriginParticipant]

That works! Thanks!

[ThaiModerator]

If you need anything else please let us know.

[Author]

Posts