CODEWITHSUNDEEP
phpwordpresssass
Steve
Steve

Reputation: 117

How to show mobile-menu in WordPress?

How do I show the mobile-menu when the screen is a certain size? It works for the main-menu I have, but not for the mobile-menu.

I tried added two IF statements in my header class, but when I reduce my screen size, only the main-menu disappears while the mobile-menu doesn't appear. 

    if(has_nav_menu('top-menu'))
    {
        wp_nav_menu(array('theme_location' => 'top-menu', 'menu_class' => 
     'top-menu'));
    }
    else if(has_nav_menu('mobile-menu'))
    {
         wp_nav_menu(array('theme_location' => 'top-menu', 'menu_class' => 
         'mobile-menu'));
    }

Since in my SCSS, I have the top-menu only appear above 960px, I expected the mobile-menu to appear.

Upvotes: 0

Views: 508

Answers (1)

Steve
Steve

Reputation: 117

I found the answer.

When you add the menu using wp_nav_menu() function, make sure to add two IF Statements rather than one if one else if. 

if(has_nav_menu('top-menu'))
{
    wp_nav_menu(array('theme_location' => 'top-menu', 'menu_class' => 
 'top-menu'));
}
if(has_nav_menu('mobile-menu'))
{
     wp_nav_menu(array('theme_location' => 'mobile-menu', 'menu_class' => 
     'mobile-menu'));
}

Upvotes: 1

Related Questions