Desktop menu shown to iPad Pro landscape users, preventing sub-menu display

In landscape orientation iPad Pro has a resolution that matches desktop viewports (1366px). This means that the mobile hamburger menu is not being triggered for the iPad Pro when it is in the landscape orientation. Other tablets and orientations get the mobile menu.

The mobile menu differs from the desktop menu in look, but also in functionality. On desktop, you have a mouse and you can either hover over a navigation element or click on on it. It is the hovering that triggers display of navigation sub-menus.

On a tablet you cannot hover, you can only tap/click. This means if the desktop navigation is displaying on the tablet, you can only interact by tapping and are effectively prevented from ever accessing the sub-menus on the iPad Pro in landscape orientation. This cuts off access to all navigation sub-menus.

Since the mobile menu is actually a separate chunk of code, this cannot be corrected (as far as I can tell) by adding custom CSS styles.

I’m looking for fixes for this specific issue. I hope you can help!

Thank you,
Susie.

Hello Susie,

Several months ago I wrote a solution for the same purpose – displaying the mobile menu on larger screen.

For specific device, like Applea iPad pro (both landscape and portrait orientation), you could use this jQuery code:

    jQuery(function($) {

     var	menuType = 'desktop';

     $(window).on('load resize', function() {
       var currMenuType = 'desktop';

       if ( matchMedia( 'only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)' ).matches ) {
         currMenuType = 'mobile';
       }

       if ( currMenuType !== menuType ) {
         menuType = currMenuType;

         if ( currMenuType === 'mobile' ) {
           var $mobileMenu = $('#mainnav').attr('id', 'mainnav-mobi').hide();
           var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');

           $('#header').find('.header-wrap').after($mobileMenu);
           hasChildMenu.children('ul').hide();
           hasChildMenu.children('a').after('<span class="btn-submenu"></span>');
           $('.btn-menu').removeClass('active');
         } else {
           var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');

           $desktopMenu.find('.submenu').removeAttr('style');
           $('#header').find('.col-md-10').append($desktopMenu);
           $('.btn-submenu').remove();
         }
       }
     });

     $('.btn-menu').on('click', function() {
       $('#mainnav-mobi').slideToggle(300);
       $(this).toggleClass('active');
     });

     $(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
       $(this).toggleClass('active').next('ul').slideToggle(300);
       e.stopImmediatePropagation()
     });

    });

Regards,
Kharis