Off-canvas menu

Hello,

I cant seem to setup an offcanvas menu.

What i want is to replace the standard menu in the header with the offcanvas menu (basically exaclu like on mobile device.

is it possible to also add a widget area below the menu in the offcanvas?

kind regards,

Hi Alex,

Here is a snippet you may use in your child theme:

// Remove primary menu and permanently enable offcanvas.
beans_remove_action( 'beans_primary_menu' );
beans_modify_action_hook( 'beans_primary_menu_offcanvas_button', 'beans_header' );
beans_replace_attribute( 'beans_primary_menu_offcanvas_button', 'class', 'uk-hidden-large', 'uk-float-right' );

The snippet above will remove primary menu and permanently enable offcanvas.

Regarding the widget area, there is already an existent widget area called "Off-Canvas Menu" which is displayed in the off-canvas below the menu.

Happy coding,

Awesome! Thanks 🙂

How to change the off-canvas animation? Based on the uikit v2 documentation, it has several animation.

// I've tried this but it didn't work
beans_replace_attribute( 'beans_widget_area_offcanvas_bar[_offcanvas_menu]', 'mode', 'slide' );

I've tried above code but when the button is triggered the mode always back to "push". Does this has connection with the offcanvas.min.js?

@Pandhu Wee,

Your function is missing the new value.

/*
 * @param string $id        The markup ID.
 * @param string $attribute Name of the HTML attribute to target.
 * @param string $value     Value which should be replaced.
 * @param string $new_value Optional. Replacement value. If set to '' will display the attribute value as empty
 */

beans_replace_attribute( $id, $attribute, $value, $new_value = null );

Oh...sorry. Actually in my function.php I write the new_value. This is from my function.php

beans_replace_attribute( 'beans_widget_area_offcanvas_bar[_offcanvas_menu]', 'mode', 'push', 'slide' );

Every time I click the menu button, the mode is automatically changed to push.