How to get a different mobile menu than desktop menu in the twentytwelve child theme

As recommended in a similar post: https://wordpress.stackexchange.com/a/156494/74343

1.) Create the menus as you want them, and name them as you like, as an example “mobile-menu” and “desktop-menu“.

2.) In your child theme in the header.php you could switch according to the wp_is_mobile() flag like this:

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}

However I used the “WP Responsive Menu” plugin, which allowed me to select a menu for mobile as well. In the configuration of the “WP Responsive Menu” one needs to select the element NOT to show on mobile, which in the case of the twenty twelve theme is: “#site-navigation”.

Happy coding!

Leave a Comment