---
title: "How to Create a Split Mobile Menu in Elementor?"
url: https://theplusaddons.com/docs/create-a-split-mobile-menu-in-elementor/
date: 2023-10-28
modified: 2026-04-10
author: "Aditya Sharma"
description: "Do you want to create a split mobile menu in Elementor? This is a unique layout where the menu items are divided into two columns with a toggle button in..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Split-Mobile-Menu-in-Elementor_-1024x536.jpg
word_count: 381
---

# How to Create a Split Mobile Menu in Elementor?

## Key Takeaways

- Mobile Menu widget from The Plus Addons for Elementor enables the creation of a split mobile menu layout with two columns.
- A limited number of menu items, like two items in each column, is recommended for optimal design balance in the split mobile menu.
- Selecting Style 2 and enabling Extra Toggle adds a toggle button in the center of the split mobile menu.

Do you want to create a split mobile menu in Elementor? This is a unique layout where the menu items are divided into two columns with a toggle button in the center. If you have a limited number of menu items like 5 items this layout can give your site a mobile app like navigation.

With the Mobile Menu widget from The Plus Addons for Elementor, you can easily make a split mobile menu on your Elementor website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Mobile Menu widget, [click here](/docs/mobile-menu-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-mobile-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Mobile Menu widget 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/)* or you can use Elementor Pro if you are already using it.* 

1. From the **Style** section, select **Style 2**.

From the **Position** dropdown, you should select **Fixed **and **Bottom** from the **Fixed Position** dropdown 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 **Menu 1** 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 **Menu 2** tab, make sure to add the same number of menu items as in the Menu 1 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** dropdown. 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.

![mobile menu split menu demo](https://theplusaddons.com/wp-content/uploads/2023/10/mobile-menu-split-menu-demo.png)

Also, read [How to Create a Sticky Bottom Mobile Menu in Elementor](https://theplusaddons.com/docs//create-a-sticky-bottom-mobile-menu-in-elementor/).

## Frequently Asked Questions

**Q: What if my split mobile menu items are not displaying correctly?**
A: If your split mobile menu items aren't displaying correctly, ensure that you have added an equal number of items in both Menu 1 and Menu 2 tabs. This balance is crucial for maintaining the design integrity of the split layout. Additionally, check that the screen width is set appropriately in the Open Mobile Menu section to ensure visibility on mobile devices.

**Q: Can I create a split mobile menu with more than five items?**
A: While the split mobile menu layout is designed for a limited number of items, you can technically add more than five. However, for optimal usability and a clean design, it's recommended to keep it to around five items. This approach mimics mobile app navigation, making it easier for users to navigate your site.

**Q: What settings work best for creating a visually appealing split mobile menu?**
A: For a visually appealing split mobile menu, select Style 2 from the Style section and set the Position to Fixed and Bottom. This positioning enhances visibility and accessibility. Additionally, ensure to enable Extra Toggle in the Extra Toggle tab to add a toggle button in the center, which improves user interaction.