Offcanvas Menu

Hello everyone,

I wanted to know if there is a way to change the offcanvas menu from primary to another custom menu without changing it's location.

Thanks.

Hey Anupam,

I think the best and quickest way if it is for your own site is to add your menu using the Custom Menu widget. Simply added it to the Off-canvas widget area in Appearance->Widgets.

Then you can remove the primary menu which is automatically added by adding the following in your child theme functions.php:

beans_remove_action( 'beans_primary_offcanvas_menu' );

If you rather want to change which menu is displayed by default, the off-canvas menu arguments have the beans_primary_offcanvas_menu_args filter.

Thanks,

Hey Thierry,

Thank you so much for providing this quickest and easiest fix. This is really very helpful. And I made this. But i still has the confusion, is this th correct method..??

//offcanvas menu
beans_remove_action( 'beans_primary_offcanvas_menu' );

beans_add_smart_action( 'beans_widget_area_offcanvas_bar_offcanvas_menu_prepend_markup', 'beans_primary_offcanvas' );

function beans_primary_offcanvas() {

    if ( !current_theme_supports( 'offcanvas-menu' ) )
        return;

    echo beans_open_markup( 'beans_primary_offcanvas', 'nav', array(
        'class' => 'tm-primary-offcanvas uk-margin uk-margin-top',
        'role' => 'navigation',
    ) );

        /**
         * Filter the off-canvas menu arguments.
         */
        $args = apply_filters( 'beans_primary_offcanvas_args', array(
            'theme_location' => has_nav_menu( 'secondary-menu' ) ? 'secondary-menu' : '',
            'fallback_cb' => 'beans_no_menu_notice',
            'container' => '',
            'echo' => false,
            'beans_type' => 'offcanvas'
        ) );

        echo beans_output( 'beans_primary_offcanvas', wp_nav_menu( $args ) );

    echo beans_close_markup( 'beans_primary_offcanvas', 'nav' );

}

Hey Anupam,

No, if you wanted to change the arguments you would use the beans_primary_offcanvas_menu_args filter instead of copying and pasting the entire code (never a good approach to do so, Beans is build to be extended without doing so). Here is what you are after:

add_filter( 'beans_primary_offcanvas_menu_args', 'example_offcanvas_menu_args' );

function example_offcanvas_menu_args( $args ) {

 return array_merge( $args, array(
   'theme_location' => has_nav_menu( 'secondary-menu' ) ? 'secondary-menu' : ''
  ) );

}

Happy coding,

Hey Thierry,

Thank you so much, That worked, i didn't know about that now i know, Beans is amazing.

Is it possbile to add the "primary" and the "secondary-menu" to the off-canvas menu?

thanks Jochen

Hey Jochen,

What do you mean by "secondary-menu", is it a menu you registered yourself? If yes, you could do something like that:

add_action( 'beans_primary_offcanvas_menu_after_markup', 'example_secondary_menu_offcanvas_menu' );

function example_secondary_menu_offcanvas_menu() {

 wp_nav_menu( array(
   'theme_location' => has_nav_menu( 'secondary-menu' ) ? 'secondary-menu' : '',
   'container'      => '',
   'menu_class'     => 'uk-margin-top',
    'beans_type'     => 'offcanvas'
 ) );

}

Note that you can also do that without code, simply by adding a Custom Menu in the Off-Canvas Menu sidebar.

Have fun,

Ahh, you do that with the _after_markup thing.

Exactly what I needed. Thanks Thierry!