---
title: "How to make a Full Width Menu Popup in WordPress?"
url: https://nexterwp.com/docs/full-width-menu-popup-in-wordpress/
date: 2023-02-06
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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...."
image: https://nexterwp.com/wp-content/uploads/2024/05/full-width-menu-popup-in-wordpress-1024x519.jpg
word_count: 456
---

# How to make a Full Width Menu Popup in WordPress?

## Key Takeaways

- Nexter Blocks Popup Builder places the menu popup in the header template and sets Content > Type to Slide with Width at 100% so it covers the entire screen.
- Pattern content creates a menu by using normal links or the Navigation Menu block from Nexter Blocks, then selecting that Pattern from the Pattern dropdown.
- Popup Load Settings > Type uses Icon for a hamburger menu button, and Extra Options turns off Esc Button Close Content and Outer Click Close Content so the popup stays open when users press Esc or click outside.

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](https://nexterwp.com/docs/add-popup-builder-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-popup-builder/)

## 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

https://youtu.be/cUqsOejgx3w?t=183

## Steps

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

- In the **Content** panel, choose a **Type** and set the popup's size.

![The Content panel with the Type setting](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-type.webp)

- Set **Content Type** and add what the popup should show.

![The Content Type setting with Pattern, Content, Editor and Shortcode](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-content-type.webp)

- Open **Display Conditions** and switch **On Button Click** on.

![The Display Conditions panel with On Button Click](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-conditions.webp)

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

![The Popup Width setting with its unit](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-popup-width.webp)

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

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

![The Content Type setting](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-content-type.webp)

- 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](https://nexterwp.com/docs/off-canvas-popup-menu-in-wordpress/)- [Close a popup with Esc or by clicking outside](https://nexterwp.com/docs/close-popup-with-esc-or-clicking-outside/)- [Popup Builder block: all settings](https://nexterwp.com/docs/add-popup-builder-in-wordpress/)