Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

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

Elementor Toggle Off-Canvas Menu

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]

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)

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.

Also Read. . .

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

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

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG