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

Question

I would like to use a different menu for my mobile website than my desktop website. With different I mean the content not the layout. I just want to use the mobile menu of the twentytwelve theme.

What I've done so far:

In my child functions.php i've added the following code:

     register_nav_menus( array(
     'primary' => __( 'Primary Navigation', 'twentytwelve' ),
     'mobile' => __( 'Mobile Navigation', 'mobile'),
     ) );

Now i'm able to create two menus in my dashboard. (dashboard>menu>locaties)

In the header.php I don't know exactly what to change so my mobile menu is loaded instead of my primary menu.

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

I've tried to change the <?php _e( 'Menu', 'twentytwelve' ); ?> to <?php _e( 'Menu', 'mobile' ); ?>, but this didn't change the menu content to my mobile menu.

I'm not that familiar with this code so hopefully someone can point me in de right direction.

Thank you for your help!

Answer 1

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!

Answer 2

If anyone is still watching this thread, I had been struggling with this for a while, none of these worked... I could do it with CSS!

Basically, create one giant menu with all the items you want on mobile and desktop. Then, add classes: "hide-mobile" and "hide-desktop" on their respective menu items.

Use this CSS:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Answer 3

In addition to Jordans comment, it is important to know how to add a class to a menu item in Wordpress:

To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme. Next, find the Screen Options tab at the top right of the screen. Click to open the panel, and check the box labelled CSS Classes. Select the menu you want to edit, and click the link you want to add a CSS class to.

Answer 4

Another approach which doesn't involve overriding theme files/templates:

In the child theme's functions.php add:

/**
 * Register the 'mobile' menu location with WordPress so it can be configured in the admin UI.
 */
register_nav_menus( array(
    'mobile' => 'Mobile Replace Primary',
) );

/**
 * When building menus, if the menu location 'primary' is being used, and we're on mobile,
 * swap it out for the menu location 'mobile'.
 * 
 * @see wp_nav_menu()
 */
add_filter( 'wp_nav_menu_args', function( $args ) {

    if( 'primary' === $args['theme_location'] && wp_is_mobile() ) {
        $args['theme_location'] = 'mobile';
    }

    return $args;
} );

Then configure your mobile menu in wp-admin / Appearance / Menus.