---
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
lang: en
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?

## 

- Creates a split mobile menu layout using the Mobile Menu widget from The Plus Addons for Elementor.
- Requires installation and activation of The Plus Addons for Elementor to utilize the Mobile Menu widget features.
- Utilizes Nexter Builder or Elementor Pro to create the header template for 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/).