Creating an off canvas menu with the new Elementor 2.4 Popups is easy. We start with creating a new popup template
Try A Demo By Clicking The Button Below
Choosing a template.
You can start with a pre-made template or just start building your own. For this tutorial I will just use this one.
The template is now on our page.
We have our starter template on the page now. This is not really what we want so let’s edit it.
I will remove the form and extra elements. I renamed our header to MAIN MENU.
I will now add a simple navigation menu from our widgets. I will tell it to display vertical and set the toggle button to “none.”
Change the logo
I will now set the logo to the clients.
Conditions and logic
For most popups to work automatically, we must set these next steps. But for a manual popup we skip them.
Save and close your template
Save and close your template. You can pull it back up to edit it at anytime.
Adding our button
We now add a button anywhere on our page. I will change the default text to MAIN MENU.
Applying our dynamic setting
Tick the little dynamic button and choose popup from our list of options.
Click this area again and search for the popup template you created.
Save our page
Save your page and then view it. You button should now open your full screen menu.
You can now click the button for a full screen menu. Or try this link.
We hope this tutorial helps you create full screen navigations using Elementor 2.4 Popups. If this tutorial helps you please share and do not forget to smash that like button below.