Blocksy Pro lets you use the Off Canvas Area on desktop devices, giving you an alternative way to present navigation and other Header Elements without keeping them permanently visible inside the regular header rows.
The Off Canvas Area is opened using the Trigger element. You can populate the panel with the Menu – Mobile element as well as other supported Header Elements.
Blocksy Pro required
Using the Off Canvas Area on desktop devices requires Blocksy Pro. The Off Canvas Area used by the mobile header remains available separately.
Getting Started
To create a desktop Off Canvas layout:
- Open the Customiser → Header.
- Switch the Header Builder to its desktop view.
- Drag the Trigger element into one of the desktop header rows.
- Populate the Off Canvas Area with the menu and any other supported Header Elements you want to display.
- Select the Off Canvas Area itself to configure its layout and appearance.
The desktop and mobile Off Canvas layouts are configured independently. This lets you use different elements, ordering and settings for each device view instead of having the desktop layout automatically mirror the mobile version.
Granular Controls
Reveal
Choose how the Off Canvas Area appears when the Trigger element is activated:
- Modal – opens the Off Canvas Area across the available screen space, placing its contents prominently over the current page.
- Side Panel – slides the Off Canvas Area into view from one side of the browser window.
Panel Width
When Side Panel is selected, use Panel Width to control how much horizontal space the Off Canvas Area occupies when opened.
Reveal From
Choose whether the Side Panel enters the screen from the left or right side.
Off Canvas Offset
Use the Off Canvas Offset control to fine-tune the positioning of the panel by applying additional space around its presentation. This can be useful when you do not want the Off Canvas Area to sit directly against the surrounding viewport edges.
Alignment Options
Control how the elements inside the Off Canvas Area are positioned using separate horizontal and vertical alignment settings.
These settings affect the overall arrangement of the panel’s contents, while individual Header Elements can provide their own additional alignment controls where supported.
Panel Heading
Enable or disable the heading displayed at the top of the Off Canvas Area. This can be useful when the panel needs an additional title or when you prefer a cleaner layout without one.
Panel Close Button
Choose whether the dedicated close button is displayed inside the Off Canvas Area. When disabled, visitors can still close the panel by navigating elsewhere or by clicking or tapping outside of it.
Panel Offset
Add space around the entire Off Canvas Area to move it away from the edges of the viewport. Increasing the offset creates a floating panel appearance by introducing an additional margin around the panel.