Full Screen Navigation Using Elementor 2.4 Popups

Creating an off canvas menu with the new Elementor 2.4 Popups is easy. We start with creating a new popup template

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.

Add navigation

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.

Skip Me

Skip Me

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.

Try me.

You can now click the button for a full screen menu. Or try this link.

Enjoy

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.

Add Read More Content Here

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email