How to make a Full Width Menu Popup in WordPress?

A full screen menu gives navigation the whole stage, with nothing else competing for attention.

Setting the popup’s width to 100% turns the same block into a full width menu.

For every Popup Builder setting in one place, see the Popup Builder block guide.

Before You Start

• Edition: Pro — the Popup Builder block is part of Nexter Blocks Pro.
• Block to enable: Popup Builder, switched on under Nexter > Blocks in your WordPress dashboard.
• The popup’s content decided: a short message, a form, or a saved pattern to load into it.

Learn via Video Tutorial

Steps

1. Add the Popup Builder block to your page and click Design from Scratch.

2. In the Content panel, choose a Type and set the popup’s size.

3. Set Content Type and add what the popup should show.

4. Open Display Conditions and switch On Button Click on.

5. In the Content panel, set Popup Width to 100 and switch its unit to %.

6. Set Popup Height the same way if you want it to fill the screen vertically too.

7. Set Content Type to Pattern and choose a saved pattern holding your menu.

8. Publish the page and test it on the front end.

A popup can have more than one display condition switched on at once. Leave On Button Click on only if you also want the button to open it.

How It Behaves

• Width and height each take a value and a unit, so 100% fills the screen while a pixel value gives a fixed size.
• A full width popup works with any of the types — a centred Popup becomes a full screen overlay.
• The close icon becomes essential at this size, because there is no outside left to click.
• The menu content itself comes from a pattern, so it can be as rich as any other page section.

Limitations

• Pro only.
• At 100% width there is nowhere outside the popup to click, so the outside click setting stops being a way out. Keep the close icon on.
• A full screen popup on load is the most intrusive combination there is, and search engines treat it as a mobile ranking problem.
• Long menus need scrolling inside the popup, so check the height on a small screen.

Troubleshooting

The popup is still narrow

Check the unit next to Popup Width is % and not px — 100px is very different from 100%.

Visitors cannot close it

At full width there is no outside to click. Switch the close icon on in the Content settings.

The menu is cut off on a phone

Set the height to 100% as well, and check the menu scrolls inside the popup.

Related Docs

• Create an off canvas side menu
• Close a popup with Esc or by clicking outside
• Popup Builder block: all settings