--- 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-09-11 lang: en author: "Aditya Sharma" description: "Do you want a menu that covers the whole screen when visitors open it? A full-width menu popup gives every link room to breathe and suits image-led, minimal headers. It..." image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-make-Full-Width-Menu-Popup-in-Elementor_-1024x536.jpg word_count: 466 --- # How to make Full Width Menu Popup in Elementor? ## - Popup Builder widget in The Plus Addons for Elementor Pro is the widget used to make a full-width menu popup, and it does not appear in the free plugin widget panel. - Open Width is set to 100% and Open Direction is set to Top, Left, or Right so the popup fills the screen, with device-specific settings available if the mobile version differs. - On Click Link Popup Close stays on in Content > Extra Options, so the menu closes when a link is chosen, while visitors can also close it with the close icon or Esc. Do you want a menu that covers the whole screen when visitors open it? A full-width menu popup gives every link room to breathe and suits image-led, minimal headers. It is the Popup Builder widget in The Plus Addons for Elementor, set to slide in at full width. *To check the complete feature overview documentation of The Plus Addons for Elementor Popup Builder widget, [click here](https://theplusaddons.com/docs/popup-builder-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's 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) ## Before You Start - **Edition:** **Pro** — the Popup Builder widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.- **A header template**, so the menu appears on every page — from [Nexter Builder](https://nexterwp.com) or Elementor Pro's Theme Builder.- **Widget to enable:** Popup Builder, switched on under **ThePlus Settings > Widgets**. https://www.youtube.com/watch?v=vdjaynv2iHE&t=5s ## Step 1: Design the menu as a template Create an Elementor template — say *Popup Menu* — with your links, laid out for a full screen: large type, generous spacing. ## Step 2: Add the Popup Builder to your header Edit the header template, drag in the **Popup Builder** widget, and in **Content > Content** keep **Popup Type** on **Slide**. ## Step 3: Make it full width Choose the edge it slides from in **Open Direction** — **Top** works well for a full-screen menu — and set **Open Width** to **100%**. Set it per device if the mobile version should differ. ![Open Width set to 100% for a Slide popup](https://theplusaddons.com/wp-content/uploads/2026/09/tp-off-canvas-open-width-wide-slide.webp) ## Step 4: Show the template and add the icon - **Content Type**: Template, and choose *Popup Menu* in **Select Content**.- **Select Option**: Icon, with an **Icon Style** or your own image. ## Step 5: Closing A full-screen popup has no outside to click, so visitors close it with the close icon or Esc. Keep **On Click Link Popup Close** on in **Content > Extra Options** so the menu closes when a link is chosen, and check the close icon is visible against your background in **Style > Open Content**. ## Settings Reference | Setting | Where | Value for a full-screen menu | | ------- | ----- | ---------------------------- | | Popup Type | Content > Content | Slide | | Open Direction | Content > Content | Top (or Left / Right) | | Open Width | Content > Content | 100% | | Content Type | Content > Content | Template | | Select Option | Content > Content | Icon | | On Click Link Popup Close | Content > Extra Options | On | ## Limitations - **Pro only.** The Popup Builder is not in the free plugin.- **Tall menus scroll inside the popup.** Style the scrollbar on the Style tab in **Content Scrolling Bar**. ## Troubleshooting ### The menu is not full width Check **Open Width** is 100% with the unit set to %, and on each device. ### Visitors cannot find the close button Change the close icon colour or add a background in **Style > Open Content > Close Icon**. ## Related Docs - [Popup Builder widget: settings overview](https://theplusaddons.com/docs/popup-builder-elementor-widget-settings-overview/) — every control in the widget.- [Create an off-canvas side menu](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/)- [Control how a popup closes](https://theplusaddons.com/docs/close-elementor-popup-with-esc-or-clicking-outside/) ## Frequently Asked Questions **Q: What do I need before building a full width menu popup in Elementor?** A: The Popup Builder widget has to be available first, because it is part of The Plus Addons for Elementor Pro and does not appear in the free plugin’s widget panel. The page also says the plugin must be installed and activated, and the widget must be switched on under ThePlus Settings > Widgets. That matters because the whole tutorial depends on the Popup Builder being available inside the Elementor editor. **Q: How do I make a menu popup cover the whole screen in Elementor?** A: The key setting is Open Width set to 100% with Popup Type on Slide. The page also recommends choosing Top as the Open Direction for a full-screen menu, though Left or Right are also listed in the settings reference. If you want different behavior on mobile, the width can be set per device, which helps keep the layout consistent across breakpoints. **Q: What is the best way to build the menu content before adding the popup?** A: The tutorial uses an Elementor template for the menu itself, such as a template named Popup Menu. That template should contain your links laid out for a full screen, with large type and generous spacing so each link has room to breathe. This approach keeps the popup container separate from the menu design, which makes the header setup cleaner. **Q: Why can't visitors close a full screen menu by clicking outside it?** A: A full-screen popup has no outside area to click, so closing has to happen through other controls. The page says visitors close it with the close icon or Esc, and it also recommends keeping On Click Link Popup Close on so the menu closes when a link is chosen. That combination matters because it prevents users from getting stuck after opening the menu. **Q: What should I do if my full width menu popup is not actually full width?** A: Open Width needs to be 100% and the unit has to be set to %, not another unit. The troubleshooting section also says to check this on each device, since device-specific settings can override what you expect on desktop. In practice, this is usually where a half-width popup comes from when one breakpoint was left unchanged. **Q: Does this work with a header template in Elementor or Nexter Builder?** A: The tutorial is built around adding the Popup Builder widget to a header template so the menu appears on every page. It specifically mentions that header templates can come from Nexter Builder or Elementor Pro’s Theme Builder. That makes this setup useful for site-wide navigation, not just a one-off page popup.