iPad Horizontal Dropdown vs. Mobile Menu woes

We are currently using Twenty Fourteen v 1.9. One of the people working on the site said that the dropdown menus on an iPad iOS Safari did not work in landscape mode. I verified the problem with an iPad Mini, however, we get the mobile menu on portrait mode and it works.

I searched the forum for this theme for a solution and found this:

https://www.ads-software.com/support/topic/horizontal-dropdown-menu-not-working-on-ipad/

Rather than modify the functions.js file, I created a child them according to WordPress’ latest recommendations. The theme consists of a mostly empty style.css file, a functions.php with the directives recommended by WordPress

https://codex.www.ads-software.com/Child_Themes

a js folder and the modified functions.js file.

		// Focus styles for menus.
		$( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
			$( this ).parents().toggleClass( 'focus' );
		} );
		// Fix for dropdown on iPad horizontal view 
		if ( 'ontouchstart' in window ) {
		    $('body').on( 'touchstart.twentyfourteen',  '.menu-item-has-children > a, .page_item_has_children > a', function( e ) {
		      var el = $( this ).parent( 'li' );

		      if ( ! el.hasClass( 'focus' ) ) {
		        e.preventDefault();
		        el.toggleClass( 'focus' );
		        el.siblings( '.focus').removeClass( 'focus' );
		      }
		    } );
		  }
	} );

To implement the fix I had to dequeue the functions.js file and enqueue the modified functions.js in the child theme. I found the solution here.

https://stackoverflow.com/questions/23507179/wp-dequeue-script-for-child-theme-to-replace-script

// loads js fix for iPad menu 
/*
 * Use any number above 10 for priority as the default is 10 
 * any number after 10 will load after
 */

add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
    wp_dequeue_script( 'twentyfourteen-script' );
    wp_deregister_script( 'twentyfourteen-script' );
    // Now the parent script is completely removed

    /*
     * Now enqueue you child js file, no need to register if you are not 
     * doing conditional loading
     */
    wp_enqueue_script( 'twentyfourteen-child-script', get_stylesheet_directory_uri() . '/js/functions.js' );
    //Now we have done it correctly
}

This did fix the dropdown menu in landscape mode on, but it broke the mobile menu. When you click or tap on the mobile menu icon it does nothing. I’ve verified this on the iPad and iPhone iOS Safari and on Safari on the MacBook Pro by narrowing the window to the point where it will switch to the mobile menu.

I have not tested the fix in the parent theme yet to see if it breaks the mobile menu. I chose creating a child theme because I didn’t want to wipe out the fix when the theme gets updated. So I don’t know if the problem stems from the way I set up the child theme or if there is something else I should do to ensure the solution works and that it doesn’t break the mobile menu.

Thanks,
Chris