Contact
Divi 5 Tips

How to Build a Divi 5 Header with an Off-Canvas Slide-In Menu

By Spencer Taylor ·

Divi 5 makes this entire process possible without plugins or custom code. Thanks to native full-site editing, Canvases, and the Interaction Builder, you can wire up a fully functional off-canvas menu that works on every device — all from inside the builder. This guide covers the exact steps and settings that actually work. It’s the same build process I use on client sites as a Divi 5 specialist.

Phase 1

Build the Header Section Basics

Where to work

You can do all of this from anywhere in Divi 5 using full-site editing, but the Theme Builder keeps things focused on the header. Go to Divi → Theme Builder, open or create a Global Header, and enter the Visual Builder.

1
Build your header layout
Set up your logo, nav links, and any CTA elements in the main header section. Lay out everything the way you want it to appear before adding the menu toggle.
2
Add a toggle icon or image
Place an Icon module (or Image module) in your header row. This will become the hamburger trigger for the off-canvas menu. You'll wire the Interaction to it in the final step.
3
Set the section element type to "header"
Select your header section → Advanced → HTML Options → set the element type to header. This improves semantic structure and accessibility without changing the visual design.
Phase 2

Create the Off-Canvas Canvas

1
Open the Canvas selector
In the top-left of the Visual Builder, click the canvas dropdown — it will show "Main Canvas" by default.
2
Add a new canvas
Click Add Canvas. Give it a clear name — something like "Off-Canvas Menu" — so it's easy to find when you set up Interactions later.
3
Set it to "Do Not Append"
In the canvas settings, select Do Not Append if it isn't already selected. This keeps the canvas completely detached from your page layout until an Interaction targets it — exactly what you want for an off-canvas menu.
Important

Do not set a z-index on the canvas itself. Z-index is handled at the section level inside the canvas.

Phase 3

Set Up the Off-Canvas Section

You're now inside your new canvas. Add a new section — this is the full-screen overlay container for your menu.

1
Name the section in Meta
Section settings → Advanced → Meta → give it an Admin Label like "Off Canvas Menu". This label shows up in the Interaction target selector, making it much easier to identify when wiring triggers.
2
Add a custom CSS class
Advanced → Add Class → add a clear, unique class name (e.g. oc-menu-section). This gives you a reliable hook for any CSS targeting you need later.
3
Hide the section on all views
Advanced → Visibility → disable visibility on Desktop, Tablet, and Phone. This is the hidden-by-default state. The Interaction toggles it visible when the hamburger is clicked. Without this step, the section shows on the front end at all times.
4
Set position to Fixed
Advanced → Position → expand Advanced Options → set to Fixed, anchored to top left. Fixed positioning takes the section out of document flow entirely — it won't push page content when it appears.
5
Set dimensions and appearance
Apply the settings in the table below to the section.
SettingValue
Width100%
Height100vh
PaddingRemove all padding from the section — padding belongs on the row
Background ColorTransparent (unless you want a full overlay color behind the menu panel)
Z-indexSet high enough to sit above the sticky header — 9999 is safe
Phase 4

Configure the Off-Canvas Menu Row

The row inside the section is the actual visible panel — the colored drawer that slides in. This is where your menu lives.

SettingValue
Max Width380px desktop/tablet · 330px mobile
Background ColorYour menu panel color
Height100vh
Padding (top/bottom)7vh — gives content breathing room at all screen heights
Animation Settings (Starting Point)

Design → Animation → Slide, direction Left, duration 400ms, opacity 80%, intensity 30%. This gives a smooth entrance. Adjust to suit your design — but note that Divi 5 currently animates the entrance only; the close snaps off without a reverse animation (a current Interaction limitation).

1
Add a close icon
Add an Icon module at the top of the row — this is your close (×) button. You'll set its Interaction in the next step. Position it to the top-right of the row using alignment settings.
2
Add your menu content
Add a Menu module, Link modules with a Loop Builder, or any other modules you want in the panel — social links, a CTA button, contact info, whatever fits your design.
Phase 5

Wire the Close Trigger

Critical Step

Set the Interaction on the close icon

Select the close Icon module → Advanced → Interactions → Add Interaction → set to Click → Effect: Toggle Visibility → Target: Section (Off Canvas Menu) — or whatever name you gave it in Meta. This is why naming your section matters: the target dropdown shows the Admin Label, making it unambiguous.

Phase 6

Wire the Open Trigger on the Header

Return to Main CanvasGo to the canvas dropdown in the top-left and switch back to Main Canvas.
Select the hamburger iconClick on the toggle icon or image you placed in your header in Phase 1.
Add the InteractionAdvanced → Interactions → Add Interaction → Click → Effect: Toggle Visibility → Target: Section (Off Canvas Menu).
Save and publishSave the header template and clear your cache. Test on the front end — the menu should open on hamburger click and close on the × icon click.
Why Toggle Visibility works for both icons

Both the hamburger and the close icon use the same Toggle Visibility effect targeting the same section. Divi 5 tracks the visibility state, so the hamburger always opens and the close icon always closes — even though they use the same effect type. No "Add" vs "Remove" distinction is needed.

Quick Reference — Key Settings

Canvas Type
Do Not Append
Section Position
Fixed, top-left
Section Visibility
Hidden on all views
Section Size
100% × 100vh
Row Width
380px desktop · 330px mobile
Row Height
100vh
Row Padding
7vh top + bottom
Interaction Effect
Toggle Visibility (both icons)
Animation
Slide · Left · 400ms · 80% opacity · 30% intensity
Section HTML Type
header (Advanced → HTML Options)
Spencer Taylor, WordPress web designer and developer

About the Author

Spencer Taylor

South Jersey–based WordPress web designer and developer, and the person behind Threshold Solutions. I build fast, custom Divi 5 and WordPress sites for businesses across New Jersey and Philadelphia — and share what I learn here.

Work with me

More from the blog

All articles