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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
What It Does
The Mobile Menu widget’s Split Menu style breaks your mobile navigation into two equal columns with a center toggle button, instead of stacking every menu item in a single vertical list. It runs on the Mobile Menu widget that ships inside The Plus Addons for Elementor, and it is meant to sit inside your header template so it takes over navigation only on smaller screens.
To do this, add the Mobile Menu widget to the header template and follow the steps below.
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
Why It Matters
A single long dropdown list feels clunky on a phone, especially once you pass three or four links. Splitting the menu into two shorter columns keeps every item within thumb reach, cuts scroll depth, and reads closer to a native app’s tab bar than a typical WordPress hamburger menu. That is a real, measurable difference for sites that live or die on mobile conversion, since mobile traffic is where most visitors first meet your site’s navigation.
What You Get
- A two-column mobile menu layout (Style 2) built into the Mobile Menu widget, no extra plugin needed.
- Independent Menu 1 and Menu 2 tabs so you control exactly which links sit on the left and which sit on the right.
- An optional center Extra Toggle button between the two columns.
- A Columns display mode under Extra Options that spaces the items evenly across the screen.
- Fixed positioning controls so the split bar can sit pinned to the bottom of the viewport.
Benefits
- Faster thumb access: short columns mean fewer scrolls to find a link.
- App-like feel: a fixed bottom bar with a center toggle reads like a native mobile tab bar.
- No custom CSS required: the split layout, spacing, and toggle are all widget controls.
- Works with any header builder: drop it into Nexter Builder or Elementor Pro’s theme builder.
Capabilities
- Style switch between the default single-column mobile menu (Style 1) and the Split Menu layout (Style 2).
- Position control with a Fixed option, plus a Fixed Position dropdown (for example Bottom) to pin the bar.
- Open Mobile Menu breakpoint control so the split menu only appears under a screen width you set.
- Separate Menu 1 and Menu 2 repeaters, each with its own set of editable menu items.
- Extra Toggle tab with an on/off switch and its own icon/title settings for the center button.
- Extra Options tab with a Display dropdown, where selecting Columns spreads items evenly across the bar.
- A dedicated Style tab to fine-tune colors, spacing, and typography once the layout is in place.
How It Works
The widget renders two independent menu repeaters side by side and, at your chosen breakpoint, swaps the desktop menu for this split layout. The Extra Toggle sits visually between the two columns using its own icon/template controls, and it is commonly wired to open an off-canvas panel or the widget’s toggle bar rather than being a plain link. The Display: Columns setting under Extra Options tells the widget to lay out Menu 1 and Menu 2 items with equal-width columns instead of packing them left-aligned.
How to Use 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.
Use Cases
- Small sites with 4-5 core links (Home, About, Services, Contact) that want an app-style bottom bar instead of a hamburger drawer.
- Landing pages where a center action, like a call or quote button behind the Extra Toggle, needs constant visibility on mobile.
- Multi-language or multi-brand headers that want left/right link grouping instead of one merged list.
Limitations
- Split Menu is a style option inside the single Mobile Menu widget, not a separate widget, so both columns share the same global Style tab for typography and color.
- The layout is designed for a small, balanced item count. The source keeps Menu 1 and Menu 2 lengths equal by design; uneven lists will visibly unbalance the two columns.
- The Extra Toggle button needs its own icon/action set up manually. It does not automatically inherit a link from either menu.
- This widget only controls the mobile breakpoint experience. The desktop header menu is a separate widget or builder element and is unaffected by these settings.
Troubleshooting
- The split layout is not visible on mobile. Check the Open Mobile Menu breakpoint value. If it’s set narrower than your test device’s viewport width, the widget still renders the default single-column menu.
- Menu 1 and Menu 2 look uneven. This happens when one tab has more menu items than the other. Match the item counts on both sides, or manually adjust spacing from the Style tab.
- The center Extra Toggle button does nothing when tapped. Confirm Extra Toggle is switched on in the Extra Toggle tab and that an action, icon, or link has actually been assigned to it. An enabled but unconfigured toggle renders with no behavior.
- The bar overlaps page content at the bottom of the screen. This is typical when Position is set to Fixed and Bottom without adding matching bottom padding to the page body; add spacing in your theme or page settings to compensate.
Also, read How to Create a Sticky Bottom Mobile Menu in Elementor.
