Horizontal dropdown menu not working on ipad

you got a link that we can take a look at? And just maybe we’ll be able to verify if other mobile devices are not working and suggest something.

Hello togehter

I have the same problem too. The horizontal menue doesn’t dropdown on the iPad Pro (newest one) and also on other tablets. This is very disappointing.

Das horizontale Drop-Menue l?sst sich auf dem neuesten iPad Pro und auch anderen Tablets nicht ?ffnen. Das ist sehr entt?uschend.

I hope, somebody has a solution.
Ich hoffe, jemand hat eine L?sung.

Greatings, Grüsse
Michael

https://mobiblog.ch

@oldiecamper1941, Yours works for me in iPad Air 2.

If the issue does not persist on the theme’s demo site then you two are unlikely to be facing the same issue.

The problem persist on the demo https://twentyfourteendemo.wordpress.com aswel as https://wp-themes.com/twentyfourteen/
tested on safari iPad iOS 9.3,
issue is in landscape mode, when the regular menu is still visible

I’m using Browserstack to test. I’ve just also tried ‘IPHONE 6S PLUS, iOS v9,
Safari. I cannot replicate the issue.

Then again, the description sounds a bit strange:

the horizontal menu doesn’t drop-down

It will be a vertical menu if it’s on mobile.

Hallo
Thank you for trying to help me.
If you look at my site – mobi.ch -, the dropdown-menues: “UNSERE TOUREN”, par exemple, don’t open on the iPad Pro. iOS 9.2.1 and some other tablets.
On my iMac it works perfectly.

Thank you Richard, The demo-link is very interesting.
Are you from the netherlands?

Greatings, Michael

Hallo Andrew

The testpage
also dosn’t work on the iPad Pro

Thank you and greatings
Michael

Hi Andrew, sadly it isn’t. It’s only vertical in portrait mode… See attached screenshots from my ipad

https://www.dropbox.com/s/khgzr8htk1jmooo/2016-03-23_22_39_27.png?dl=0
https://www.dropbox.com/s/5k5ml1ecin9isz7/2016-03-23%2022.38.07.png?dl=0

@richard van Denderen, Are you sure you attached all the right screenshots? This one: https://www.dropbox.com/s/khgzr8htk1jmooo/2016-03-23_22_39_27.png?dl=0 ?

If you look at my site – mobi.ch -, the dropdown-menues: “UNSERE TOUREN”, par exemple

Huh, @oldiecamper1941, that’s not even WordPress?

I think @oldiecamper1941 means https://mobiblog.ch

I included the support details page on purpose. Could be useful for replication

I would recommend debugging your theme’s functions.js file. Insert console logs in between lines and see if they are ever ran. If they are ran, then the code is at least being read.
https://www.w3schools.com/js/js_debugging.asp

Andrew, thanks for your efforts.
I myself are not able, to look into theme’s funktion file.
But perhaps my supporter will have a look on it.

Hi Andrew,

I’m not using the theme actively myself.
But even on a fresh install of WordPress, no plugins active and the latest version of Twenty Fourteen the menu isn’t working on an iPad in landscape mode.
https://twentyfourteen.wptestblog.nl/

The mobile hamburger menu works just fine, the problem is that in landscape the regular menu(sticky header) is still visible.

If I compare the js of Twenty Fourteen to that of Twenty Twelve (where the menu is working) I see that a part similar to this one is missing:

// Better focus for hidden submenu items for accessibility.
( function( $ ) {
	$( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
		$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
	} );

  if ( 'ontouchstart' in window ) {
    $('body').on( 'touchstart.twentytwelve',  '.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' );
      }
    } );
  }
} )( jQuery );

Adding the following code between line 121 and 122 resolves this problem:

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' );
		      }
		    } );
		  }

Adding the following code between line 121 and 122 resolves this problem:

Weird, that’s not the code to toggle the navigation menu. If you remove that code, does the solution* persist? If it persists then it sounds like a caching issue.