How To Change Menu Behavior on iOS devices?

[Rob McParticipant]

Team StudioPress,

I have an issue with a website that has a lengthy submenu that requires scrolling when a mobile device is in landscape. For smaller devices, it's no big deal, because the actual mobile menu is engaged. However, on iPad and iPad Pro in landscape, it's a big issue.

Long story short, the JS for menus in Genesis Framework specifically wants to close menus when clicking outside the menu - which makes scrolling to get to the items at the bottom of the submenu impossible.

Here is the relevant code in Genesis Framework:

ios = (function () {
				var ios = /^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent);
				if (ios) {
					// tap anywhere on iOS to unfocus a submenu
					$('html').css('cursor', 'pointer').on('click', $.noop);
				}
				return ios;
			})(),

How can I adjust this in my theme, so that website visitors on iPad and iPad Pro will be able to see the full menu?

Research is indicating that it's essential to differentiate "click" from "touchstart" as iOS tends to interpret either action as a click and, thus, close the menu. However, sadly, my JS is not good enough to figure out how to do this and then add it to the theme.

Has anyone tried to do this before? If so, how can it be done?

Thanks,
Rob Mc

https://modfarmsites.com/decastell

[Rob McParticipant]

I found this searching around the internet that separates the two actions (click and touchstart), but am unsure how (and where) to place that in my theme to separate the actions.

<script>
        $("#button").on('touchstart click', function(event) {
            if (event.type == "touchstart") {
                $(this).off('click');
                console.log("Only touch event is fired");
            } else if (event.type == "click") {
                $(this).off('touchstart');
                console.log("Only click event is fired");
            }
        });
    </script>

[Author]

Posts