How to Create a Full-Screen Menu in Elementor

Updated: May 22, 2021

Do you want to create a full-screen menu in Elementor? If yes, this article will show you how. It takes no add-on to create a full-screen menu in Elementor. All you need is Elementor Pro. The pro version of Elementor comes with a popup builder feature that allows you to create beautiful popups. You can make use of this feature to create a full-screen menu in Elementor.

How to create a full-screen menu in Elementor

Before getting started, make sure you have upgraded your Elementor to the pro version. Once you are ready, go to Templates -> Popups. Create a new popup template by clicking the Add New button.

Give your popup template a name and click the CREATE TEMPLATE button.

Elementor offers tens of premade popup templates you can choose from. In this example, we will create the template from scratch so simply close the template library to open the Elementor editor.

Before start creating the popup template, set the layout first. To do so, open the popup settings by clicking the gear icon on the bottom-left corner. On the Layout block under the Settings tab, set the width to 100 VW and height to Fit To Screen. You can also set the entrance as well as exit animation effects.

Once done setting the layout, start creating the template by adding a new section. You can add any element you want to the template. To add the menu items, you can use the Nav Menu widget or Icon List widget. In this example, we use the Icon List widget.

Edit each list item. You can add the label of the menu item on the Text field and add the link on the Link field.

Go to the Style tab to style up the lists. You can set the space between list items and the alignment on the List block. To set the icon size and color (if you use icons), you can open the Icon block. To set the typography (font size, font family, font style) and the text color of the list items, you can open the Text block.

If you want, you can change the background of the section. To customize the close button of the popup, open the popup settings once again and go to the Style tab. Open the Close Button block and you will see some options to customize the close button such as the background color, size, and position.

Once you are done creating the popup templates, click the arrow icon next to the PUBLISH button and select Display Conditions.

Set where you want the popup to appear by clicking the ADD CONDITION button and click the NEXT button to set the trigger.

Enable the On Click option and click SAVE & CLOSE.

Calling the popup template

Once the popup template is ready, you can call it. Since you want to create a full-screen menu, you can create a header with Elementor or edit an existing one. Read this post to learn more about how to create a custom header with Elementor.

You can call the popup template you have just created with any Elementor widget that has an option to add a link such as Button, Icon, Icox Box, Text, Image, and so on. In this example, we use the Icon Box widget. Select the widget to turn into an editing mode. Under the Content tab on the left panel, seek for the field to add the link. Set the link to dynamic and select Popup.

Select the popup template you have just created by clicking the wrench icon.

Publish/update your header template.

Originally posted on: April 26, 2020

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

One thought on “How to Create a Full-Screen Menu in Elementor

  1. This is very cool and I’ve used this exact method on some websites that I’ve developed. The one problem that I encountered was when I noticed that the menu (popup) didn’t appear when the site was viewed in a browser that had a more “aggressive” popup-blocker installed. Any advice?

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!