---
title: "How to Create a Popup Mobile Menu with Pattern in WordPress?"
url: https://nexterwp.com/docs/create-a-popup-mobile-menu-with-pattern-in-wordpress/
date: 2024-12-02
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to show extra menu items or content in a mobile popup menu in WordPress? A popup menu allows for a more streamlined and user-friendly navigation experience for..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Popup-Mobile-Menu-with-Pattern-in-WordPress_-1024x519.jpg
word_count: 472
---

# How to Create a Popup Mobile Menu with Pattern in WordPress?

## Key Takeaways

- Nexter Blocks includes a Mobile Menu block that allows users to add a popup mobile menu on their WordPress website.
- Users can create a Pattern for additional menu items by navigating to Appearance > Patterns > Add New Pattern.
- The Mobile Menu block offers options for custom width/height or full screen size for the popup display.

Do you want to show extra menu items or content in a mobile popup menu in WordPress? A popup menu allows for a more streamlined and user-friendly navigation experience for mobile users keeping the main menu compact and organized.

With the Mobile Menu block from the Nexter Blocks, you can easily add a popup mobile menu on your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks Mobile Menu block,* [click here](https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

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

To do this, first, you have to create a Pattern with the additional menu items.

You can go to **Appearance** > **Patterns **> **Add New Pattern **to create a Pattern.

Then, add the Mobile Menu block to the header template and follow the steps -

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.* 

1. After selecting the appropriate style from the **Style** section, create the menu.

2. Then go to the **Extra Toggle** tab and enable **Extra Toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-extra-toggle-pattern.gif)

3. After adjusting the text and icon/image, from the **Content** section, select **Pattern**. 

> *Note: You can also create a Pattern from here by clicking on the ****+ Create Pattern**** button.*

4. Then, from the **Pattern** section, you have to select your mobile menu Pattern.

> *Note: Once you choose a Pattern you will see a ****Backend Visibility**** toggle option, to keep the editing experience smooth by default the blocks won’t be visible on the page, turn on the toggle to see the block once done you can turn it off.*

From the **AJAX Load **section, you can configure the display result of selected pattern. Here, you’ll find two options -

- **Default **- You can see the result at a time.

- **Standard AJAX** - You have to wait for a moment for the result to load.

> *Note: To make the Standard AJAX work, make sure to enable the ****Enable Ajax Templates**** toggle from ****Nexter Blocks**** > ****Extra Options**** > ****Settings****.*

You can go to **Nexter Blocks** > **Dashboard **> **Extra Options **> **Settings **> ***Enable Ajax Templates***.

![](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-extra-options-settings-ajax-load-templates.png)

Then, add the Mobile Menu block to the header template and follow the steps -

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.*

You can set the popup open direction from the **Direction** section.

From the **Open Content Style** section, you can select the popup open style.

Then, from the **Content Width** section, you can set the popup width. Here, you’ll find two options -

**Custom Width/Height** - With this, you can set a custom width and height for the popup.

**Full Width/Height** - With this, you can set the popup width and height to full screen size. 

Now, you’ll see your additional menu item in a popup.

![](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-extra-toggle-pattern-demo.gif)

## Frequently Asked Questions

**Q: What should I do if my popup mobile menu isn't displaying correctly?**
A: If your popup mobile menu isn't showing up, check if the Mobile Menu block from Nexter Blocks is installed and activated. This block is essential for adding a popup menu. Additionally, ensure that you've selected a Pattern for the mobile menu and that the Backend Visibility toggle is set correctly to see the block during editing.

**Q: What are the best practices for setting the popup width in a mobile menu?**
A: When setting the popup width for your mobile menu, consider using the Custom Width/Height option for a tailored fit or Full Width/Height for a more immersive experience. Customizing the width can help maintain a clean layout, especially on smaller screens, ensuring that users can easily navigate without feeling cramped.