How to Create a Toggle Off-Canvas Menu with Elementor Pro

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)

d XCeUC7TWvwXSTABDN0O4Pa6pnWALZm9BGe8NNgKSYFfA6 TwT4vDSjYW83hKMfKfYMOzrRb8L2Okp27 kGy1Iwhg

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]

Elementor Toggle Off-Canvas Menu

Under Background overlay add a color to your preference, then set the opacity of your background overlay.

3. Add Navigation Menu Widget

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)

77 y71dBVRJs7Jp X r9a1BxpMtYOc88Fm9o0zwPKlZsOW82Mp ttTCZoumSNidJ8AXHSH137K wXT O1yMR25HDniVO6tMbLbyexFcB8RUz33ETfzNYbKoIdxFnsz b9d8KRiTK

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)

QhiTLSSVkJ6FgdCN L4aDkZOLeqnAFdY547s UnneqiJdnuNYcYLsHtL89fJKUgBzl9gTkUNXWke JWolg9LLfa UUjE8 vI9T 3O4D9vAQGTA4Nx6jmELhhKryuu NBwtTqzkyi

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)

QRsttysJPGnnY Jb0nY4O FVPD9pXZ eHLo0LTLBCIBjA RDy4d9ZEnCZ62BMUuuRFR8S6DqHo3lnnPvllPGCQ7 RevVwe IZOCEJuIBoGdhH eSurr0B2 B3ZJyPY2Kao 1oXDB

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users