Divi 5 Tutorial

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

by spencer | Aug 2, 2026 | Divi 5 Tips

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.

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.

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.

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.

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

Open the Canvas selector

In the top-left of the Visual Builder, click the canvas dropdown — it will show "Main Canvas" by default.

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.

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.

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.

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.

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.

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.

Set dimensions and appearance

Apply the settings in the table below to the section.

Setting	Value
Width	`100%`
Height	`100vh`
Padding	Remove all padding from the section — padding belongs on the row
Background Color	Transparent (unless you want a full overlay color behind the menu panel)
Z-index	Set 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.

Setting	Value
Max Width	`380px` desktop/tablet · `330px` mobile
Background Color	Your menu panel color
Height	`100vh`
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).

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.

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)

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 →