Want to give your website visitors a more immersive navigation experience? A full width menu popup lets you reveal the entire site navigation in a full-screen overlay triggered by a button or icon. This keeps your page layout clean while making it easy for visitors to reach any section of your site.
Best Used For:
- Agency and portfolio websites that want a clean, uncluttered header without a traditional navigation bar
- SaaS and product landing pages where header space is limited and a full-screen overlay improves usability
- Photography and creative sites that use full-screen menus to match an immersive design aesthetic
To check the complete feature overview documentation of The Plus Addons for Elementor Popup Builder widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated to use all its features.
With the Popup Builder widget in The Plus Addons for Elementor, you can create full-screen menu popups that open as a slide-in overlay directly in the Elementor editor.
To start, create an Elementor template that contains your menu. For the menu links, use standard anchor links or the Navigation Menu widget in The Plus Addons for Elementor.
Also read, how to show Elementor popup when arriving from a specific Page Link.
For this example, name the template Popup Menu.
Since this popup functions as your site navigation, place the Popup Builder widget in your header template.
Once your template is ready, add the Popup Builder widget to your header template. In the Content tab, go to Popup Type and choose Slide.
From the Open Direction dropdown, choose the direction your slide menu should appear from. Use this when you want the menu to slide in from the top, bottom, left, or right depending on your design. In the Open Width field, set the value to 100 and the unit to % so the popup fills the entire viewport.
From the Content Type dropdown, choose Template. Then from the Select Content dropdown, choose the Elementor template you created for the menu.
Also read, how to create a popup mobile menu with Elementor template.
For the popup trigger, from the Select Option dropdown choose Icon. Select the icon style that fits your design, or upload a custom image to use as the trigger instead.
In the Extra Options tab, toggle off both Esc Button Close Content and Outer Click Close Content. Use this when you want the menu to stay open until the visitor actively closes it, which prevents accidental dismissals mid-navigation.
With both options turned off, the menu stays open even if visitors click outside the popup or press the Esc key.
When visitors click the trigger icon, the popup opens as a full-screen overlay displaying the menu template.
Also read, how to trigger a popup after a certain number of page views in Elementor.
