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?
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.
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?
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.