Support » Theme: Twenty Fourteen » Horizontal dropdown menu not working on ipad

Viewing 15 replies - 1 through 15 (of 16 total)
  • AsaPearson

    (@asapearson)

    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.

    oldiecamper1941

    (@oldiecamper1941)

    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

    http://mobiblog.ch

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    oldiecamper1941

    (@oldiecamper1941)

    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

    oldiecamper1941

    (@oldiecamper1941)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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 ?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 http://mobiblog.ch

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.
    http://www.w3schools.com/js/js_debugging.asp

    oldiecamper1941

    (@oldiecamper1941)

    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.
    http://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' );
    		      }
    		    } );
    		  }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Horizontal dropdown menu not working on ipad’ is closed to new replies.