The Toggle off-canvas menu is a type of menu that is prompted to show up when clicked and a popup holding the menu items comes off the canvas of the page instead of opening another page to show you the menu item details, it just automatically popups up an off-canvas menu which has its own other items that you can navigate through
This toggle off-canvas menu does not completely overshadow the main page when clicked on, you can actually still scroll through the main page even with the off-canvas menu open, plus there’s a close button on it, to close it when you need to. Additionally, this off-canvas menu is also fully responsive on mobile devices.
Please note that the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Toggle Off-Canvas Menu Video Tutorial
Steps to Create a Toggle Off-Canvas Menu in Elementor
1. Create and Style a Popup
Firstly, go to your Elementor Dashboard
Go to Templates, find the Popups option and click to create a popup (remember this is only in Elementor Pro) (01:37)
Click on the popup and go to the settings icon at the bottom
Under Layout, set Width to 25%
For the Height, choose the fit to canvas option
Under Position horizontal option, you can choose to have it in the center, left or right-aligned, in this case, I’ll just have it left-aligned. Under Vertical positioning you can choose to have it at the top, center or bottom, I’ll choose the top.
Down on the Overlay option; turn it on. Without the overlay background, it will just be plain.
Next is the Close Button, turn it on, to be able to close the popup menu
Entrance Animation; that’s the way the popup will show up when clicked. You can choose where you want it to fade from; here I’m choosing to fade in left. You can also set the animation duration.
After this go to Style and then to the Overlay option, set the overlay color.
2. Edit the Off-Canvas
Go to the canvas itself and select the main section
Here, set the Layout to Boxed, that’s under Content Width, then set the Minimum Height to 80
Now go to Style, add a background image on your popup and position it centre-left. You can always position it however you want. (04:27)
Also Read: How to Make Animated Rainbow Text Effects in Elementor [PRO]
Under Background overlay add a color to your preference, then set the opacity of your background overlay.
Go to the widgets area and choose the Navigation Widget, drag it to the canvas (04:33)
Now select the Nav widget and under Layout, make it a dropdown. This is after selecting the menu, which is created in the Menus area under Appearance.
Note: To create a Menu; just hit CTRL/CMD+E, find Menus and open in a new tab, then you can create your menu.
Back to the Layout, go down to the Toggle button and choose hamburger, then align it to the left.
Now go to Style in order to customize the menu items that are in the dropdown.
Make Text Color white, no background color. Then Typography Zilla Slab
Add vertical padding of 18px so the menu items have space between each other.
Under Hover, make color white and background color green
For Typography, set Family to Zilla slab and font size Rem 3 points. Set vertical padding to 18px.
For Active just leave everything as default.
Down to the Toggle Button; adjust the size to 45 and change the color to your preference, as well as background.
You can also set your hover option as you like.
To Read: How to Make a Glowing Gradient Border in Elementor [PRO]
After this go to Advanced (for the nav menu widget), add a bottom margin of 20 for some space between the heading widget and the nav menu widget. You can also add any content you want.
Now save the popup, without adding any conditions. Then exit the popup settings.
4. Create Other Sections
Here is where I’m going to create the header with the item that will trigger the toggle off-canvas menu popup.
So back to the dashboard, go to Templates and choose Theme Builder. Inside this click on Add New to create a new header (07:19)
Here you can be able to create and edit your header.
After creating the header go back to Theme Builder, go to the header option on the left and select the header you created. My header here is full width and has a Minimum height of 300 pixels. It also has two columns and two items; a heading widget and a button widget.
Select the heading widget, go to the Link options and select Dynamic Tag (07:55)
Under the Dynamic tag select Popup. Then on popup settings set Action to toggle popup. This is so that the popup only shows up when someone clicks on the item.
Then under Popup, select the off-canvas popup you created earlier.
Now at the bottom, under settings (08:25)
Choose the Display Conditions option so you can set up where you want to display that header. Here I choose to display it on the Entire Website. Save and close.
Back to the dashboard, choose the Pages option and open up any page.
Also Read: Elementor Landing Page – A Step by Step Guide
5. Responsive Settings
To work on the responsive settings of your popup, go back to your settings under popup.
Here choose the width of your popup to set up what specific percentage it will take up on your page then save and close, with no conditions.
And that’s how you create an elementor toggle off-canvas menu popup. If you have any comments or questions let me know in the comments below. Remember to subscribe to my youtube channel and join my newsletter for more tips and tutorials.
