Off-Canvas menu

1. Go to Extensions > Modules > New. Create a New module of the type Menu.
2. Add the module title and select the menu that you would like to display via this module.
3. You can select a base menu item that’ll always be active, but if you choose the default value that is Current then the active menu item will be highlighted at all times.
4. Set the Start & End level of the off-canvas menu module.
5. You can also choose whether you want to show the sub-menu items or not.
6. After settings, all the required fields set the module position to offcanvas.
7. Set the module status as Published.
8. Lastly, confirm the module assignment under the Menu Assignment tab where all the modules will be published and you are done.

Astroid backend has all the other options to style the off-canvas menu module. But this option will only be visible if you have the Header element enabled, and currently, it is only available for Horizontal & Stacked Header modes only.

Off-Canvas menu- Choose whether you want to display the off-canvas menu or not. If yes then the following options will be visible:

1. Toggle Visibility: Choose on which devices will the off-canvas menu be visible that is on All devices, Only on extra small devices, Up to Small devices, Up to medium devices, Up to Large devices or only on extra large devices. By default its set to All devices.
2. Panel Width: Set the size of the off-canvas menu either in px or em or rem.
3. Off -Canvas Animation: Select how you want the off-canvas menu to open that is either Slide on Top, Push or Reveal animations.
4. Off-Canvas Direction: You can choose between Left and Right for the position from where you want to open the Off-Canvas menu.