---
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-04-14
author: "Aditya Sharma"
description: "Are you looking to add an app like a split mobile menu to your WordPress website? This innovative layout divides your menu items into two columns and includes a central..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Split-Mobile-Menu-in-WordPress_-1024x519.jpg
word_count: 350
---

# How to Create a Split Mobile Menu in WordPress?

## Key Takeaways

- Nexter Blocks includes a Mobile Menu block that allows users to create a split mobile menu layout with two columns.
- The ideal number of menu items for the split mobile menu is about five, ensuring a balanced design.
- Users can customize the toggle button's appearance by enabling Extra Toggle in the Extra Toggle tab.

Are you looking to add an app like a split mobile menu to your WordPress website? This innovative layout divides your menu items into two columns and includes a central toggle button. If your menu has only a few items, about five, this layout can be an ideal option for a mobile menu.

With the Mobile Menu block from the Nexter Blocks, you can easily make a split 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, 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. From the **Style** section, select **Style 2**. 

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

From the **Position** section, you should select **Fixed **and **Bottom** from the **Fixed Position** section for a better look.

2. Then add the appropriate screen width in the **Open Mobile Menu** section so the menu is only visible on mobile.

3. In the **Main Menu** tab, keep a limited number of menu items like two items and edit the items as per your need. These menu items will be placed on the left side.

4. In the **Right** **Menu** tab, make sure to add the same number of menu items as in the Main Menu tab to keep the design balance. Then edit the items as per your need. These menu items will be placed on the right side.

5. Now go to the **Extra Toggle** tab and enable **Extra Toggle**. Now you’ll see a toggle button in the middle of the menu. Edit the item as per your requirement.

6. Finally, go to the **Extra Options** tab and select **Columns** from the **Display** section. This will make sure the menu items are equally spread across the screen.

Now you’ll have a beautiful split mobile menu, you can fine-tune the menu from the Style tab.

![](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-style-2-demo.png)

     

## Frequently Asked Questions

**Q: What should I do if the Mobile Menu block is not displaying correctly?**
A: If the Mobile Menu block isn't displaying as expected, ensure that it is installed and activated as part of the Nexter Blocks. Check that you've set the screen width in the Open Mobile Menu section to a value appropriate for mobile devices. If the menu items are not appearing, verify that you have added the correct number of items in both the Main Menu and Right Menu tabs to maintain design balance.

**Q: Can I use a split mobile menu for a website with many menu items?**
A: A split mobile menu is ideal for websites with around five menu items. If your site has more than that, consider simplifying the menu or using a different layout to avoid clutter. The split design works best when you can keep the left and right menu items balanced, typically with two items on each side for a clean look.

**Q: What are the best practices for styling the split mobile menu?**
A: For optimal styling of the split mobile menu, select Style 2 from the Style section and ensure the menu is fixed at the bottom of the screen. This positioning enhances usability on mobile devices. Additionally, use the Extra Options tab to select Columns in the Display section, which helps evenly distribute menu items across the screen.

**Q: How can I create a header template for the split mobile menu?**
A: To create a header template for your split mobile menu, use the free Nexter Builder. This tool allows you to add the Mobile Menu block to your header template easily. Following the steps outlined in the tutorial will help you customize the layout and functionality to suit your needs.