Off-Canvas Menu Configuration

Zo2 Framework support Canvas left sidebar when Joomla website loads on smaller screens. This menu displays content from a defined position.

1. 1. How it works


On small screens we hide the mega menu and replace it with the menu menu_button button. When clicked, everything slides to the right revealing the full menu. Clicking again on the menu button or the close button we’ll add to the top of the menu slides everything back to the left. As the browser is resized larger we’ll convert the menu to a horizontal navigation bar as well as convert our single column layout to a 2 column layout.

off_canvas

2. 2. Enable Off-canvas menu


  • To enable Off-Canvas sidebar, go to Exxtensions > Template Manager > Zo2_template-default:

template_manager

  • And open Layout Profile tab > Layout Builder then enable Off-canvas sidebar.

canvas_menu

  • By default, Off-canvas will be assigned to mega-menu position in Header section.

header

  • Click the setting_icon icon to enable canvas menu and custom it as well.

canvas_setting

This setting allows you to enable the responsive functionality to respond to the different devices it’s on, then click the Responsive configuration to experience.

  • Front-end Appearance

off_canvas