Menu Double Tap Issue on Mobile (Android 9)

Okay, I think I figured it out…

Removing the code below (in argent > js > navigation.js) appears to resolve the issue on mobile devices, but creates an issue on tablets (where the size of the screen hasn’t triggered the mobile menu style), as you can’t hover to display the sub-menu items without the code below.

Ack, anyone have suggestions for a solution for this?

From here: “This patch allows the user to view a site on a touch screen tablet and access child menus by clicking on the parent once, or access the parent by clicking on it twice.”

	// Fix child menus for touch devices.
	function fixMenuTouchTaps( container ) {
		var touchStartFn,
			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item-has-children > a' );

		if ( 'ontouchstart' in window ) {
			touchStartFn = function( e ) {
				var menuItem = this.parentNode;

				if ( ! menuItem.classList.contains( 'focus' ) ) {
					e.preventDefault();
					for( var i = 0; i < menuItem.parentNode.children.length; ++i ) {
						if ( menuItem === menuItem.parentNode.children[i] ) {
							continue;
						}
						menuItem.parentNode.children[i].classList.remove( 'focus' );
					}
					menuItem.classList.add( 'focus' );
				} else {
					menuItem.classList.remove( 'focus' );
				}
			};

			for ( var i = 0; i < parentLink.length; ++i ) {
				parentLink[i].addEventListener( 'touchstart', touchStartFn, false )
			}
		}
	}

	fixMenuTouchTaps( container );

• This reply was modified 6 years, 8 months ago by hastibe.

Following this Window matchMedia() Method (specifically the example given at the bottom of the tutorial), I made the changes below to the problematic JavaScript.

Is this a workable solution? It works for me, in that on my phone, I no longer need to tap twice to load parent menu items that have child menu items, and on my tablet, tapping once on the parent menu item displays the child menu items, and tapping twice loads the parent menu item, but I don’t know enough to know if this is an appropriate way to solve the problem.

// Fix child menus for large touch devices.
function myFunction(x) {
  if (x.matches) { // If media query matches
    function fixMenuTouchTaps( container ) {
		var touchStartFn,
			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

		if ( 'ontouchstart' in window ) {
			touchStartFn = function( e ) {
				var menuItem = this.parentNode;

				if ( ! menuItem.classList.contains( 'focus' ) ) {
					e.preventDefault();
					for( var i = 0; i < menuItem.parentNode.children.length; ++i ) {
						if ( menuItem === menuItem.parentNode.children[i] ) {
							continue;
						}
						menuItem.parentNode.children[i].classList.remove( 'focus' );
					}
					menuItem.classList.add( 'focus' );
				} else {
					menuItem.classList.remove( 'focus' );
				}
			};

			for ( var i = 0; i < parentLink.length; ++i ) {
				parentLink[i].addEventListener( 'touchstart', touchStartFn, false )
			}
		}
	}

	fixMenuTouchTaps( container ); 
  } 
}

var x = window.matchMedia("(min-width: 768px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

@darnelldibbles – thanks for the response! I’ve just added the code to a test site for now, and haven’t encountered any side effects, but I’ve only been able to test it on a few different devices (desktop, Android phone, and iPad). I just e-mailed you a link and password to access the test site, and would definitely be interested in knowing if the modified code holds up for you.

I’ve temporarily disabled the // Fix child menus for touch devices. code on my main site, but if you are interested in seeing the issue on Argent without the modified navigation menu code, here are two sites that exhibit the double tap (on mobile menu items that have child menu items) behavior: wp-themes.com/argent and http://www.newtonproject.eu.

Hope this is helpful and looking forward to hearing back!