Hi, the site I am working on is built on top of Vantage theme and SiteOrigin page builder. I’ve realized that the standard menu (with drop-down lists) doesn’t support touch events. I mean that the submenus aren’t shown when the user touches the top-level items. This isn’t adequate in the era of touchscreen monitors that come with most laptops. Currently, the submenus are shown on hover. The same needs to happen on touch. I am talking about the menu in “desktop” mode. Would you please add this functionality or tell me how to configure this if it’s already supported?
Desktop menu touch event for the menu in Vantage theme
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
This is a good example how I think menus should work in the era of laptops with touchscreen monitors:
https://superfish.joelbirch.design/examples/
Hi Roman
Thanks for posting.
I’ve stopped the mobile menu from loading on most devices here https://demo.siteorigin.com/vantage/. The Blog Layouts parent menu item activates normally on my phone. The same menu item also works normally on my laptop if I change chrome://flagsTouch UI Layout to Enabled which simulates touch events. Assuming the demo works for you as I’ve described above, please, send a link to the site you’re working on and we’ll take a look at the issue.
Thanks for the reply, Andrew!
Your demo works the way you described only in Firefox and Chrome. Not in MS Edge or Internet Explorer.
When I removed a link from the parent element on my site (I should have thought of that myself :) ), the menu started to work as in your demo, and also only in Firefox and Chrome. By the way, on the first day when I tested your demo in Firefox, the menu closed by itself every time (pretty fast — from about 0.5 sec to 5 sec). I can’t duplicate this particular problem today.
I haven’t tried Safari or Opera.
This needs to work in all major browsers. Can this be fixed?
Hi Roman,
Unfortunately, this isn’t something we can fix as it’s dependent on Microsoft itself improving support. Edge, by default, has touch events disabled even for devices that do support touch. When touch events in Edge are enabled, their implementation is notoriously buggy as there’s a chance that the browser simply won’t register touch events. This is a known issue in Edge and while I have heard recent reports of them working on a fix, I wouldn’t hold your breath as this is a long-standing issue. IE 11 doesn’t support touch events in general.
I see… However, both IE and Edge react to touching links and buttons. Is the problem limited to other types of HTML elements?
Could the following library help you: https://github.com/CamHenlin/TouchPolyfill ? On their demo page, both IE and Edge evidently produce touch events.
Hi Roman,
Edge has general issues with how it handles touch events and commonplace functionality, like CSS hovers, isn’t well supported which is why menus drop downs don’t work very well. Unfortunately, I’m not able to provide you with specifics on these issues as it’s outside of our scope of support, but this issue is well documented elsewhere online.
I’ve forwarded the suggested library to the development team.
Alex, your development team might be interested in finding out how the menu on https://elementor.com/blog/showcase-june-18/ works with touch in all browsers.
The site I am working on has been built with SiteOrigin, so I’d, naturally, want your theme/builder handle the menu well.
Thanks for your attention to this!
Hi Roman,
Thank you for the link. As a work around, you can install Max Mega Menu which features Edge touch support. Vantage is intergrated with Max Mega Menu out of the box.
Thanks for the idea! It seems to support Edge and IE. We will consider using it.