How to set up OffCanvas in Bricks

This tutorial walks you through setting up an offcanvas in Bricks using BricksExtras’ OffCanvas element.

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

Since Bricks adds position: relative to all containers, we need to override it so that the close icon is positioned properly at the top right of our offcanvas.

Go to Bricks → Settings → Custom Code and paste:

.brxe-xoffcanvas .brx-container {
	position: static;
}

Step 5

Once you are done setting up the OffCanvas you may want to toggle its “Hide In Builder” setting on.