---
title: "How to make Full Width Menu Popup in Elementor?"
url: https://theplusaddons.com/docs/full-width-menu-popup-in-elementor/
date: 2023-02-09
modified: 2026-04-12
author: "Aditya Sharma"
description: "In the modern era of website design, creating an interactive and user friendly website is essential to attracting and engaging users. One way to do this is by implementing a..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-make-Full-Width-Menu-Popup-in-Elementor_-1024x536.jpg
word_count: 409
---

# How to make Full Width Menu Popup in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Popup Builder widget allows users to create full screen menu popups.
- Users set the Open Width to 100% to ensure the popup covers the entire screen.
- The Popup Builder widget can be placed in the header template for easy access to the menu.

In the modern era of website design, creating an interactive and user friendly website is essential to attracting and engaging users. One way to do this is by implementing a full width menu popup on your website. This will allow your users to quickly and easily find the content they're looking for, while also providing an interactive and appealing aesthetic to your website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Popup Builder widget, [click here](/docs/popup-builder-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/popup-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

With The Popup Builder widget from The Plus Addons for Elementor you can easily create beautiful full screen menu popups in no time.

https://www.youtube.com/watch?v=vdjaynv2iHE&t=5s

To do this first, you have to create an Elementor template with a menu, for this, you can use normal links or if you want, you can use the Navigation Menu widget of The Plus Addons for Elementor.

Also read, [how to show Elementor popup when arriving from a specific Page Link](https://theplusaddons.com/docs//show-elementor-popup-arriving-from-a-specific-url/).

Let’s say we named the template Popup Menu.

Since this will be the menu of your website, you should place the Popup Builder widget in the header template.

So once you have created your template, add the widget on the page/template and go to Content > Popup Type and choose **Slide**.

From the **Open Direction **dropdown, choose the appropriate direction for your full width menu slide.
In the **Open Width**, make sure the value is set to 100 and the unit is set to **%,** so it covers the entire screen.

![](https://theplusaddons.com/wp-content/uploads/2023/02/popup-builder-full-width-new1.png)

Then choose the **Template** option from the **Content Type** dropdown, and from the **Select Content** dropdown, choose your Elementor template with the menu.

![](https://theplusaddons.com/wp-content/uploads/2023/02/popup-builder-menu-template-new1.png)

Suggested reading, [how to create high-converting landing page with Elementor](https://theplusaddons.com/blog/create-elementor-landing-page/)

For the popup trigger from the **Select Option** dropdown choose the **Icon** option and select the appropriate style for the icon or you can choose a custom image as well.

Finally from the **Extra Options** tab, turn off both **Esc Button Close Content** and **Outer Click Close Content** options.

![](https://theplusaddons.com/wp-content/uploads/2023/02/popup-builder-esc-outer-disable-new.png)

So your menu will not close if someone clicks outside the popup or presses the Esc key.

Now if you click on the popup trigger element, the popup will open in a full screen containing your menu.

Also read, [how to trigger a popup after a certain number of page views in Elementor](https://theplusaddons.com/docs//popup-on-page-views-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if my full width menu popup doesn't appear?**
A: If your full width menu popup isn't showing, ensure that the Popup Builder widget from The Plus Addons for Elementor is correctly installed and activated. Also, check that you've set the Open Width to 100% in the settings, as this is crucial for the popup to cover the entire screen.

**Q: What are the best settings for creating a full width menu popup?**
A: For optimal results, set the Popup Type to Slide and the Open Width to 100% in the Popup Builder settings. Additionally, disable the Esc Button Close Content and Outer Click Close Content options to keep the menu open until the user selects an item, enhancing usability.

**Q: How do I trigger the full width menu popup from a specific page link?**
A: To trigger the full width menu popup from a specific page link, refer to the guide on [how to show Elementor popup when arriving from a specific Page Link](https://theplusaddons.com/docs//show-elementor-popup-arriving-from-a-specific-url/). This method allows you to create a seamless user experience by opening the menu based on user navigation.

**Q: Are there any limitations to using the full width menu popup?**
A: One limitation is that the full width menu popup is only compatible with Elementor and cannot be used with other page builders like Gutenberg or Divi. This means if you're using a different builder, you won't be able to implement this feature.