Time for another Divi 5 freebie! This time around, we’re providing you with 6 Off Canvas Menus, each available in two versions. Default (inherits your global styles) and Prestyled (ready-made look). Import them to your Divi 5 Library, assign them in the Theme Builder, and customize them to your needs.
Preview
Let’s take a look at all 6 Off Canvas Menus in this pack. The download is further down the post.
Get all 6 Off Canvas Menus for free in both Default and Prestyled versions. Each Layout is ready to import into your Divi Library and can be used within your Global Header template.
What’s Included (14 Exports)
After you download and unzip the folder, you’ll find all 14 layout exports neatly organized into Default and Prestyled versions as individual menus and as full “All Menus” packs.
Default – Individual Menus (6) → Uses your global styles.
Default – All Menus (1) → Full pack using your global styles.
Prestyled – Individual Menus (6) → Includes inline styling for an instant, ready-made look.
Prestyled – All Menus (1) → Full pack with inline styling applied.
How To Install The Layouts
Keep your download folder nearby to import the files to your Divi website.
1. Import Layouts Into The Divi Library
Go to Divi → Divi Library.
Click the Import & Export button and select the JSON files you want to install.
For a quick start, look for the Off Canvas Menus (All) file and import it.
2. Create Or Edit Your Global Header
Go to Divi → Theme Builder.
Create a new Global Header template or open an existing one.
Inside the header canvas, click the Add Layout button in the top left and choose Saved Layout .
Select one of the Off Canvas Menu layouts from your Library.
Click Use This Layout to load it, then save your header and Theme Builder changes.
Default vs Prestyled: Which Should You Pick?
When you open the download folder, you’ll see two versions of every menu: Default and Prestyled. The structure is identical; the difference lies in how styling is applied.
Default menus inherit your global styles. Your brand colors, fonts, and button styles are applied automatically. If your variables are set, Default gives you a seamless match with minimal edits.
Prestyled menus include inline styles for colors, fonts, and buttons, so they look exactly like the previews out of the box. Great for demos, rapid prototypes, or when you want the showcased look immediately.
In short, pick Default to blend with your site instantly. Choose Prestyled to get the exact preview design.
These menus utilize Divi 5’s Flexbox controls, Interactions, and responsive settings, allowing you to fine-tune behavior across breakpoints. By default, each of these Off Canvas Header layouts comes with Interactions and Visibility settings in place, so we’ll concentrate on customizing the headers to meet your needs.
When using one of these templates, the first step should be to ensure the correct menu is selected in the Menu module. Start by opening Divi 5’s Layers View.
While in Layers view, any greyed-out module or row has Visibility settings in place. If you need to make changes to one of these areas, click on it, navigate to the Visibility tab, and adjust the settings accordingly. This will make it easy to edit icons, replace images, or make any other design changes you wish.
Expand the Header section and look for the Menu module. In the Content tab, select your menu from the available options.
Once selected, the Menu module will update with the menu items located in the menu.
If you haven’t specified a Logo for your menu, you can expand the Logo menu and either select an image from the Media Library or upload one. In this example, the Logo is in an Image module, set as the Site Logo dynamically.
2. Adjust Styles
For Default menus, your global styles (colors, fonts, and button styles) are automatically applied. When using a prestyled menu, there may be situations where you want to change it to match your brand. Use Divi’s Inspector feature to easily change colors, fonts, and numerical values to match your branding.
You can change the entire look and feel of the Layout with a few clicks.
3. Fine-Tune Responsive Behavior
You can tweak how the menu behaves on different devices. This can be done using Divi’s Customizable Responsive Breakpoints, the Responsive Editor, or at the module level with a quick dropdown menu.
4. Preview And Save Changes.
Once you are satisfied with all adjustments, save the changes to your Global Header by clicking the Save button located at the top right of the Theme Builder.
Exit the Theme Builder and be sure to save the Layout by clicking the Save Changes button.
Try Divi 5’s Interactions Today
These 6 Off Canvas Menus are a fast way to modernize your site’s navigation in Divi 5. Import the JSON files, load a layout in your Global Header, and tailor the behavior with Interactions. These layouts are a great way for you to start getting familiar with Divi 5’s new features as well!
Thank you for these and the other layouts. Is it possible in the future to create live demos of these resources? That would make it a lot easier to view them and decide which to use.
I would love to see a demo of these in action somewhere!
Very nice menus but we need this as standard across all menu items – not just one button. Feels like D5 now has everything standard except for a nice custom menu mega menu system – maybe you could pull a layout from the library into the menu system using classes?
This. Elegant Themes should really priortize this feature ASAP.
This is fantastic and something we have all been waiting for from Divi—wow! How to fade the element being displayed via js? I am using Off Canvas Menu 1 for a megamenu and it would be great if there could be a fadeIn(200) effect or even a slideDown(200) or toggle effect. This is the only control that is missing from “Interactions” in Divi 5. Very, very helpful to have this functionality! Thanks, Elegant Themes!!!
Thank you for your kind words! While Divi’s Interactions feature is powerful, we understand that more advanced control over animations like fadeIn() and slideDown() would be a welcome addition. We’re always working to improve Divi, and we appreciate your feedback and suggestion, it has been passed along to our development team. Stay tuned for future updates! 👍
Hello,
Thank you for the menus and explanations. I’ve tested them all, and they work perfectly across all screen types. The “interactions” feature is truly a valuable addition—it allows for the creation of mega-menus, popups, visibility effects, and more. The more I use it, the more essential it becomes.
These are great examples of off canvas menus that you can create with Divi 5. But right now I don’t see how these interactions can be used on an actual WordPress menu, there is no way to apply an interaction on a specific menu item.
All good things in time.
However, you could build a custom Menu now (a dropdown menus would be difficult) using the Loop Builder and ACF and that would work for this.