---
title: "How to Create a Split Mobile Menu in WordPress?"
url: https://nexterwp.com/docs/create-a-split-mobile-menu-in-wordpress/
date: 2024-12-02
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "App bars usually keep one action in the middle and the rest either side of it. Style 2 splits the bar into two groups, so a central button can sit..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Split-Mobile-Menu-in-WordPress_-1024x519.jpg
word_count: 400
---

# How to Create a Split Mobile Menu in WordPress?

## Key Takeaways

- Nexter Blocks Pro incluye el bloque Mobile Menu, que se activa en Nexter > Blocks y usa Style 2 para dividir la barra en dos grupos con una acción central opcional.
- Open Mobile Menu(px) define un ancho máximo: el menú aparece en pantallas más estrechas que ese número y permanece oculto por encima de él.
- Mobile Menu limita el diseño a dos o tres elementos por lado en una pantalla estrecha, y no equilibra automáticamente las listas desiguales.

App bars usually keep one action in the middle and the rest either side of it.

Style 2 splits the bar into two groups, so a central button can sit between them.

*For every Mobile Menu setting in one place, see the [Mobile Menu block guide](https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/).*

[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 **Style** to **Style 2**.

![The Style setting with Style 2 chosen](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-style2.webp)

- Fill in the **first** item list for the left side and the **second** list for the right.

- Add an **Extra Toggle** if you want a central button between the two groups.

![The Extra Toggle panel](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-extra-toggle.webp)

- Publish and check the bar on a phone.

> ***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.*

## How It Behaves

- **Style 2 is what creates the split.** With Style 1 only the first item list renders; switching to Style 2 brings the second list in as well — measured on the front end.- The two lists are edited separately, so each side is controlled on its own.- An extra toggle sits between the groups, which is the usual home for a central action button.- Everything else — position, breakpoint, indicator — works the same as a normal mobile menu.

## Limitations

- **Pro only.**- Two groups mean twice the crowding on a narrow screen. Two or three items a side is usually the limit.- The split is a layout choice, not a separate block, so the second list is simply ignored on Style 1.- There is no automatic balancing — uneven lists give an uneven bar.

## Troubleshooting

### Only half my items show

**Style** is still on **Style 1**, which renders the first list only. Switch to **Style 2**.

### The two sides look lopsided

Put the same number of items in each list, or move one across.

## Related Docs

- [Sticky bottom mobile menu](https://nexterwp.com/docs/create-a-sticky-bottom-mobile-menu-in-wordpress/)- [Popup mobile menu with a pattern](https://nexterwp.com/docs/create-a-popup-mobile-menu-with-pattern-in-wordpress/)- [Mobile Menu block: all settings](https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/)