Off Canvas Main Menu Hide your content and menus off screen.
To add a persistent off canvas main menu regardless of the screenwidth simply set/remove the following classes on the following elements:
-
1
.navbar-toggler: remove any.d-noneclasses so it shows at all screenwidths. Also ensure it has thedata-toggle="off-canvas"attribute set. Also adddata-settings='{"targetClassExtras":"navbar-offcanvas"}'to this element. -
2
.navbar-nav: remove any.float-*-*classes so it does not float at all.
Options
You can pass options and settings with the off canvas trigger.
-
Menu Target: To target a different menu other than
.navbar-mainset thedata-target="TARGET_ID"to point at the target menu. You would need to hide the target menu manually. -
Menu Style & Direction: Off canvas content can come with all directs: top|bottom|left|right and either push, overlay or reveal the content. Example:
data-settings='{"modifiers":"top|bottom|left|right,push|overlay|reveal"}'. -
Menu Modal: Place a modal over the page when the off canvas menu is open. Example:
data-settings='{"modal":true|false}'. -
cloneTarget: Clone the target or just move it. Useful for responsive menus. Example:
data-settings='{"cloneTarget":true|false}'. -
autoOpen: Auto open an off canvas content on load rather than clicking. Example:
data-settings='{"autoOpen":true|false}'.