How to use two different menus one for desktop other for tablets (3 posts)

  1. Santosh
    Posted 3 years ago #

    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.

  2. damian.smith
    Posted 3 years ago #

    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?

  3. Santosh
    Posted 3 years ago #

    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() {
          'header-menu' => __( 'Header Menu' ),
          'extra-menu' => __( 'Extra Menu' )
    add_action( 'init', 'register_my_menus' );

Topic Closed

This topic has been closed to new replies.

About this Topic