Skip to content
Header Options Header Bottom Header Collapse Menu Header Responsive Collapse Menu Header Compact Header Dark Header Elements Header Full Width Header Nav Full Height Header Nav Left Header Navbar Below Header Off Canvas Header Overlay Menu Header Responsive Overlay Menu Header Primary Header Translucent Header Translucent Dark Header Translucent Primary Header Transparent Header Transparent Dark Header Transparent Primary

Off Canvas Main Menu Hide your main menu 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="jpanel-menu" attribute set.
  • 2 .navbar-main : add .d-none class so the main menu is hidden all screenwidths. The menu plugin will show it as needed.
  • 3 .navbar-nav : remove any .float-*-* classes so it does not float at all.

The menu plugin copy the menu markup/HTML into a new off canvas menu which is hidden by default.

Options

  • Menu Direction: To make the menu slide in from the left add data-direction="left" to the .navbar-toggler element.
  • Menu Target: To target a different menu other than .navbar-main set the data-target="TARGET_CLASS_OR_ID" to point at the target menu. You would need to hide the target menu manually.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Get AppStrap Today
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