Off Canvas Menu

The off canvas mobile wrapper for the main menu can be activated on desktop at any screen width. By default this automatically activated on a mobile device but can be very useful for desktop menus that are too large and don’t fit properly horizontally and you want to use the vertical off canvas side menu. It may also be used as a style preference for a more minimal and clean look. Indicate a large screen width such as 9999 to always use this type of main menu on desktop.

Workflow

  1. Access Journal > Header > Active Header > Off Canvas Menu and indicate the desired screen width at which to transfer the standard main menu into the off canvas wrapper.
  2. Create and apply Mobile Wrapper style. Journal > Styles > Mobile Wrapper. This styles the actual container that slides in from the side.

  3. Customize the menu item that triggers the off canvas menu.

Mega Menu content with horizontally oriented columns will not adapt the column width on breakpoint, since the breakpoint rule is based on screen width. If you intend to use this type of menu set up your column layouts based on the width of the wrapper.