WordPress.org

Support

Support » How-To and Troubleshooting » How to use two different menus one for desktop other for tablets

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

  • I want to use two different menus in my responsive theme. One menu will be used for desktops and other menu will be visible only on tablets.
    I want to know how i can add this in media query.

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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' );
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to use two different menus one for desktop other for tablets’ is closed to new replies.