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


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!

, , , Patrick 4 years 2020-05-24T13:10:52-05:00 0 Answers 63 views 0

Leave an answer