Peter
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 still scroll through the main page even with the off-canvas menu open, 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.
Firstly, go to your Elementor Dashboard
01
Go to Templates, find the Popups option and click to create a popup (remember this is only in Elementor Pro)
02
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
03
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.
04
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
05
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.
06
After this go to Style and then to the Overlay option, set the overlay color.
07
Toggle Off-Canvas Menu Video Tutorial
Check out more on this story on the link below.