---
title: "How to Add a Mobile Menu in WordPress?"
url: https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/
date: 2024-12-02
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A desktop menu squeezed onto a phone becomes a hamburger icon and a guess. The Mobile Menu block gives small screens their own bar of labelled icons, the way an..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Mobile-Menu-in-WordPress_-1024x519.jpg
word_count: 512
---

# How to Add a Mobile Menu in WordPress?

## Key Takeaways

- Nexter Blocks Pro incluye el bloque Mobile Menu, que se activa en Nexter > Blocks y permite crear una barra móvil con iconos etiquetados para pantallas pequeñas.
- Open Mobile Menu(px) define una anchura máxima, no mínima: el menú aparece solo por debajo de ese número y permanece oculto por encima, con ejemplos de 767 o 480 para ancho de teléfono.
- Mobile Menu admite Position fixed o absolute, y cada elemento lleva una etiqueta, un icono o imagen y su propio enlace; la barra fija puede mostrar cuatro o cinco elementos cómodamente antes de usar swiper display o Extra Toggle.

A desktop menu squeezed onto a phone becomes a hamburger icon and a guess.

The Mobile Menu block gives small screens their own bar of labelled icons, the way an app would.

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

## Before You Start

- **Edition:** **Pro** — the Mobile Menu block is part of Nexter Blocks Pro.- **Block to enable:** Mobile Menu, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your menu items decided:** four or five is the usual limit before a phone bar gets crowded.

## Steps

- Add the **Mobile Menu** block to your page or template and click **Design from Scratch**.

- In the **Mobile Menu** panel, add your items — each one takes a label, an icon or image, and a link.

![The Mobile Menu panel with Style and the item list](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-style.webp)

- Set **Open Mobile Menu(px)** to the width below which the menu should appear.

![The Open Mobile Menu(px) breakpoint setting](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-breakpoint.webp)

- Set **Position** — fixed to the top or bottom of the screen, or absolute so it sits in the page.

![The Position setting with fixed and absolute](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-position.webp)

- In **Extra Options**, choose **Display** and switch on the **Active Page Indicator** if you want the current page marked.

![The Extra Options panel with Display and Active Page Indicator](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-display.webp)

- Publish, then check the page on a phone or by narrowing your browser.

> ***Open Mobile Menu(px)** is a maximum width, not a minimum — the menu appears on screens narrower than the number and stays hidden above it.*

## What Each Panel Controls

| Panel | What you set there |
| ----- | ------------------ |
| Mobile Menu | The style, the menu items, where the bar sits, and the width it appears below |
| Extra Toggle | An extra button that can open a pattern, such as a full menu panel |
| Extra Options | Whether items swipe or sit in columns, and the active page indicator |

## The Two Styles

| Style | What it gives you | Guide |
| ----- | ----------------- | ----- |
| Style 1 | One row of items | — |
| Style 2 | Two groups of items, one each side — the split layout | [Split mobile menu](https://nexterwp.com/docs/create-a-split-mobile-menu-in-wordpress/) |

## How It Behaves

- The menu only appears below the width you set, so it never competes with your desktop navigation.- **Position = fixed** pins the bar to the top or bottom of the screen, where it stays as the visitor scrolls. Measured at the bottom, the bar's edge sits exactly at the bottom of the viewport.- **Position = absolute** leaves it in the page flow instead, so it scrolls away with the content.- Each item takes a label, an icon or image, and its own link.

## Limitations

- **Pro only.**- A fixed bar covers part of the screen permanently, so leave room at that edge or content hides behind it.- Phone bars fit four or five items comfortably; beyond that use [the swiper display](https://nexterwp.com/docs/create-a-swiper-mobile-menu-in-wordpress/) or an [extra toggle opening a full menu](https://nexterwp.com/docs/create-a-popup-mobile-menu-with-pattern-in-wordpress/).- The block is a navigation bar of its own, not a converter for an existing WordPress menu — the items are added here.

## Troubleshooting

### The menu never appears

Check **Open Mobile Menu(px)**. It is the width the menu appears *below*, so a value smaller than the screen you are testing keeps it hidden.

### It shows on desktop too

The breakpoint is set too high. Lower it to a phone width such as 767 or 480.

### The block is missing from the inserter

Switch **Mobile Menu** on under **Nexter > Blocks** in your dashboard.

![Mobile Menu switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-admin-enable.webp)

## Related Docs

- [Sticky bottom mobile menu](https://nexterwp.com/docs/create-a-sticky-bottom-mobile-menu-in-wordpress/)- [Split mobile menu](https://nexterwp.com/docs/create-a-split-mobile-menu-in-wordpress/)- [Popup mobile menu with a pattern](https://nexterwp.com/docs/create-a-popup-mobile-menu-with-pattern-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding a mobile menu in WordPress with Nexter?**
A: Nexter Blocks Pro is required, because the Mobile Menu block is part of Nexter Blocks Pro. The block also has to be enabled under Nexter > Blocks in your WordPress dashboard before it shows up. In practice, this is the main gatekeeper for the tutorial, and the page also notes that four or five items is usually the comfortable limit before a phone bar starts feeling crowded.

**Q: How do I stop a mobile menu from showing on desktop?**
A: The breakpoint is controlled by Open Mobile Menu(px), and it works as a maximum width, not a minimum. That means the menu appears only on screens narrower than the number you set and stays hidden above it. If it shows on desktop, the breakpoint is simply too high, so lowering it to a phone width such as 767 or 480 keeps desktop navigation separate.

**Q: What is the best way to handle a mobile menu with more than five items?**
A: A phone bar fits four or five items comfortably, so anything beyond that starts to get crowded fast. The page points to two practical alternatives: the swiper display or an extra toggle opening a full menu. That matters because the Mobile Menu block is its own navigation bar, not a converter for an existing WordPress menu, so item count has to be planned inside the block itself.

**Q: Can I use the Mobile Menu block as an existing WordPress menu converter?**
A: No, the Mobile Menu block is built as a navigation bar of its own, not as a converter for an existing WordPress menu. Each item is added directly in the block with its own label, icon or image, and link. That design gives you more control over small-screen behavior, but it also means the menu structure has to be recreated inside the block.

**Q: What are the two mobile menu styles in Nexter Blocks?**
A: Style 1 gives you one row of items, while Style 2 creates two groups of items with one group on each side in a split layout. The split version is covered in [Split mobile menu](https://nexterwp.com/docs/create-a-split-mobile-menu-in-wordpress/). The choice matters because Style 1 is simpler for short menus, while Style 2 spreads items out when you want a more balanced bottom or top bar.

**Q: Why does my mobile menu never appear on my site?**
A: The most common cause is Open Mobile Menu(px) being set below the screen width you are testing. Since that setting is a maximum width, the menu stays hidden until the viewport gets narrower than that number. If you are testing on desktop or a wide browser window, narrow it first or raise your breakpoint to match the device range you actually want.