This tutorial walks you through setting up an offcanvas in Bricks using BricksExtras’ OffCanvas element (the template version – the new version you can nest in elements directly to the Offcanvas)
Demo (no sound) of what we are going to build:
Step 1
Go to Bricks → BricksExtras and toggle Burger Trigger and OffCanvas elements on.
Step 2
Go to Bricks → Templates → Add New.
Give it a title of say “Offcanvas Content”.
Template type: Section.
Publish and edit with Bricks.
At PAGE SETTINGS → GENERAL, disable the header and footer.
Add a Container.
If you have padding values set for Root Container Padding in your global theme style, select the Container in your “Offcanvas Content” Template and set padding on all sides to 0.
Add an Icon element, select your desired close icon and sets its size.
Position: Absolute
Top: 10px
Right: 10px
Give it a class of brxe-xburgertrigger. This is the default class that will toggle the Burger Trigger. Adding this class ensures that when this icon is clicked, the offcanvas gets closed.
Add your desired content under the Icon. In our demo, we added Heading, Rich Text and Image elements.
Step 3
Edit your sitewide Header Template.
Add a Burger Trigger element and position it in your header (typically at the right).
Add an OffCanvas element at the end of your structure at the root level.
Select “Offcanvas Content” Template (the one we created in the earlier step) as the value of “Template”.
Step 4
Once you are done setting up the OffCanvas you may want to toggle its “Hide In Builder” setting on.