Skip to content

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-none classes so it shows at all screenwidths. Also ensure it has the data-toggle="off-canvas" attribute set. Also add data-settings='{"targetClassExtras":"navbar-offcanvas"}' to this element.
  • 2 .navbar-nav : remove any .float-*-* classes so it does not float at all.


You can pass options and settings with the off canvas trigger.

  • Menu Target: To target a different menu other than .navbar-main set the data-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}' .

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page