Do you want a menu that slides in from the side when visitors tap a hamburger icon? That is an off-canvas menu, and it keeps the header clean on every screen size.
The Popup Builder widget in The Plus Addons for Elementor builds one from any menu you design as an Elementor template.
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’s installed & activated to enjoy all its powers.
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, if the menu should appear on every page — from Nexter Builder or Elementor Pro’s Theme Builder.
- Widget to enable: Popup Builder, switched on under ThePlus Settings > Widgets.
Step 1: Design the menu as a template
Create an Elementor template — say Popup Menu — with your links. Plain text links work, or use The Plus Addons Navigation Menu widget inside it for a full menu with sub-items.
Step 2: Add the Popup Builder to your header
Edit the header template and drag in the Popup Builder widget where the hamburger icon should sit.
Step 3: Choose Slide or Reveal Content
In Content > Content, set Popup Type:
- Slide (default) — the menu slides in over the page.
- Reveal Content — the whole page moves aside to reveal the menu.
Set Open Direction to Left or Right, and adjust Open Width if the panel should be wider or narrower.
Step 4: Show the menu template
Set Content Type to Template and choose Popup Menu in Select Content.
Step 5: Use a hamburger icon as the trigger
Set Select Option to Icon and pick an Icon Style, or choose Custom to upload your own image.
Step 6: Decide how it closes
In Content > Extra Options, Esc Button Close Content, Outer Click Close Content and On Click Link Popup Close are all on by default. For a menu, keep On Click Link Popup Close on so the panel shuts when a visitor picks a page. Turn the other two off only if the menu should stay open until the close icon is used.
To remove the dark layer behind the menu, go to Style > Open Content > Popup Background Overlay and make it transparent.
Settings Reference
| Setting | Where | Options | Default |
|---|---|---|---|
| Popup Type | Content > Content | Slide, Reveal Content, Corner Box, Modal Popup | Slide |
| Open Direction | Content > Content | Left, Right, Top, Bottom | Left |
| Open Width | Content > Content | Slider, per device | Not set |
| Select Option | Content > Content | Icon, Call To Action, Hidden, Lottie | Call To Action |
| Icon Style | Content > Content | Style 1 to 3, Custom | Style 1 |
| On Click Link Popup Close | Content > Extra Options | On / Off | On |
Limitations
- Pro only. The Popup Builder is not in the free plugin.
- The menu is a template. Changing the links means editing the template, not WordPress’s Menus screen — unless the template contains a menu widget that reads a WordPress menu.
- Reveal Content moves the whole page. Fixed or sticky elements on the page can behave differently while it is open; use Slide if that happens.
Troubleshooting
The menu does not close after a link is clicked
Turn on On Click Link Popup Close in Content > Extra Options. Links to a section on the same page otherwise leave the panel open.
The icon does not appear
Check Select Option is Icon, and the icon colour on the Style tab, in Toggle Icon/Hamburger, is not the same as the header background.
