Wordpress Menu Exchange On Tablet's Orientation

Question

I am using the plugin PHP Browser Detection and I want to achieve different menus for different devices. I have set them up called primary and mobile.

Now, I want to switch those on used device. Something like this I have done and it is working fine:

  if ( is_tablet() ) {
    wp_nav_menu( array('menu' => 'primary' ) );
  }
  elseif ( is_mobile() ) {
    wp_nav_menu( array('menu' => 'mobile' ) );
  }
  else {
    wp_nav_menu( array('menu' => 'primary' ) );
  }

Now, I would like to go further, because the tablet's design looks nice in landscape view but bad in portrait mode.

So, I ask you, if there is a way to check the orientation (on tablets) and then go for it, meaning to change the menu from primary to mobile.

Something like that maybe:

  if ( is_tablet(portrait) ) {
  ...

Thank you very much, guys.

Answer 1

cybmeta is right you cannot trust server-side browser detection

<div class="portrait">
 wp_nav_menu( array('menu' => 'primary' ) );
</div>

<div class="mobile">
 wp_nav_menu( array('menu' => 'mobile' ) );
</div>

<div class="primary">
 wp_nav_menu( array('menu' => 'primary' ) );
</div>

and use media queries to hide and display menu

Answer 2

@cybmeta is correct, you're really better off going with a responsive approach. You can hide specific items in wp_nav_menu using CSS. You could just create a menu with all the pages you want throughout the devices. An unmodified wp_nav_menu will actually provide each list item with a specific unique ID such as nav-menu-item-789. Knowing this you could inspect each list item, and using media queries you could hide or show entire list items based off IDs.

This is just an alternative to generating three separate wp_nav_menus and show / hide them as you go. Both of which should work with little effort.