How to use two different menus one for desktop other for tablets

Something along the lines of:

#tablet-nav {display:none; }

@media (max-width: 800px) {

#desktop-nav { display:none; }
#tablet-nav { display:inline; } 

}

Basically you are hiding the tablet dropdown menu on anything wider than 800px wide but anything less than, you unhide it and hide the desktop nav instead.

Hope this helps?

thanks damian. smith
But i want to know how to call a menu which is not default menu for theme.
I have created two menus with name “main” and “tab” My “main” menu is default theme menu.
I want to use “tab” menu for tablets without registering it

I know how to add menus to theme.

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );