A split mobile menu puts a few links on the left, a few on the right and one highlighted button in the middle, like the tab bar of a phone app.
The Mobile Menu widget from The Plus Addons for Elementor builds this layout with its Style 2 option: Menu 1 fills the left side, Menu 2 the right side and the Extra Toggle sits in between.
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 Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Mobile Menu is a Pro widget. In the free plugin it appears in the Elements panel with a lock icon, and a page that already holds a Mobile Menu widget shows nothing of it while Pro is inactive.
- Widget to enable: Mobile Menu, switched on under The Plus Addons > Widgets.
- Where to add it: any page, or a header template (for example with the free Nexter Builder) to show the menu on every page, as the widget’s own panel recommends.
How to Create a Split Mobile Menu
- Add the Mobile Menu widget. In Content > Mobile Menu, set Style to the second picture, Style 2.
Selecting Style 2 and the position settings, in motion:
- Leave Position on Fixed and Fixed Position on Bottom (the defaults) to pin the bar to the bottom of the screen.
- Set Open Mobile Menu to the widest screen that should show the menu, for example 767 for phones. Leave it empty and the bar also shows on tablets and desktops.
- Open Menu 1 and add the items for the left side. For each item choose an Icon or Image, and fill in Text and Link. Two items per side works well.
- Open Menu 2 and add the items for the right side. This section only appears with Style 2.
- Open Extra Toggle and switch on Extra Toggle. Give it an icon and Text, then choose what it does in Content: Link opens a URL, Template opens an Elementor template in a panel.
- Open Extra Options and set Display to Columns, so the items share the width of the screen evenly. Then publish and open the page on a phone.
On a 390 px wide phone the finished bar looks like this:
Another split menu, styled with a dark background and a round centre button:
How It Behaves
- With Columns, the items and the centre button share the width equally. On a 390 px phone, two items per side plus the button gave five parts of 78 px each. Without the Extra Toggle, each side takes half of the screen.
- With Swiper (the default Display), each side becomes its own swipeable strip of 70 px items, which leaves empty space when a side has only a few items.
- Items saved in Menu 2 are only shown with Style 2. Switching back to Style 1 hides them.
- Style the look in the Style tab: Menu for item colours, typography and background, Extra Toggle for the centre button, Content Background for the bar itself.
Limitations
- The default item icon does not show on the page. Choose an icon from the library for every item.
- On Style 2 the Pin Text badge is cut off at the edge of its item until you set Extra Options > Pin Text Overflow to Visible.
- A fixed bar sits on top of the page, so leave some space at the bottom of your content.
Troubleshooting
The Menu 2 section is missing
Menu 2 only appears when Style is set to Style 2.
The menu also shows on desktop
Set Open Mobile Menu to the widest screen that should show it, for example 767. The bar is hidden on every wider screen.
The items do not fill the bar
Set Extra Options > Display to Columns.
