--- 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-09-14 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Split-Mobile-Menu-in-Elementor_-1024x536.jpg word_count: 692 --- # How to Create a Split Mobile Menu in Elementor? ## - The Mobile Menu widget from The Plus Addons for Elementor uses Style 2 to create a split mobile menu, with Menu 1 on the left, Menu 2 on the right, and the Extra Toggle in the middle. - The widget is a Pro widget in The Plus Addons for Elementor Pro, and it appears in the Elements panel with a lock icon when the free plugin is active. - Open Mobile Menu sets the widest screen that shows the bar, with 767 as an example for phones, while leaving it empty also shows the menu on tablets and desktops. - Extra Options set Display to Columns so the items and center button share the screen evenly, and Menu 2 only appears when Style is set to Style 2. 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](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/mobile-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text) Table Of Contents ## 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](https://nexterwp.com/docs/nexter-theme-builder-explained/)) 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**. ![Style 2 selected in the Mobile Menu section, with the split menu bar at the bottom of the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-split-style.webp) Selecting Style 2 and the position settings, in motion: Switching the Mobile Menu widget's Style control to Style 2 to enable the split layout. - 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. ![The Menu 2 section with its first item open, showing the Text and Link fields](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-menu2.webp) - 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. ![Extra Toggle switched on, adding a centre button between the left and right menu items](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-split-extra-toggle.webp) - 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. ![Display set to Columns in the Extra Options section for the split mobile menu](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-split-display.webp) On a 390 px wide phone the finished bar looks like this: ![Split mobile menu on a phone: Home and Shop on the left, a blue Cart button in the middle, Wishlist and Account on the right](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-split.webp) Another split menu, styled with a dark background and a round centre button: ![Finished split mobile menu with two icons on each side and a round plus button in the middle](https://theplusaddons.com/wp-content/uploads/2023/10/mobile-menu-split-menu-demo.png) ## 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**. ## Related Docs - [Mobile Menu widget settings overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/)- [Create a sticky bottom mobile menu](https://theplusaddons.com/docs/create-a-sticky-bottom-mobile-menu-in-elementor/)- [Create a popup mobile menu with an Elementor template](https://theplusaddons.com/docs/create-a-popup-mobile-menu-with-elementor-template/) ## Frequently Asked Questions **Q: How do I make a split mobile menu in Elementor with links on both sides and a button in the middle?** A: The split layout comes from the Mobile Menu widget’s Style 2 option in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH. Menu 1 fills the left side, Menu 2 fills the right side, and the Extra Toggle sits between them like a phone app tab bar. For a clean result, keep Position on Fixed and Fixed Position on Bottom so the bar stays pinned to the screen edge. **Q: Why is the Menu 2 section missing in my Mobile Menu widget?** A: Menu 2 only appears when the Mobile Menu widget is set to Style 2. That matters because Style 1 hides the second menu entirely, so switching styles is what controls whether the right-side links exist at all. In practice, this is the first thing to check when a split menu looks incomplete in The Plus Addons for Elementor. **Q: How do I stop my mobile menu from showing on desktop?** A: Set Open Mobile Menu to the widest screen that should show it, such as 767 for phones. That breakpoint controls where the bar appears, so leaving it empty makes the menu visible on tablets and desktops too. The Plus Addons for Elementor uses that setting to keep the split mobile menu truly mobile-only instead of turning it into a site-wide bar. **Q: Why do my split menu items leave empty space instead of filling the bar?** A: Set Extra Options > Display to Columns. With Columns, the left items, right items, and center button share the width evenly, which is why a 390 px phone can divide into five equal parts of 78 px each. If you leave Display on Swiper, each side becomes its own swipeable strip and gaps are more likely when there are only a few items. **Q: What are the main limitations of the split mobile menu layout?** A: The default item icon does not show on the page, so each item needs an icon chosen from the library. On Style 2, the Pin Text badge gets cut off at the edge until Extra Options > Pin Text Overflow is set to Visible. Since this is a fixed bottom bar, leave space at the bottom of your content so it does not sit underneath it. **Q: What other mobile menu layouts can I build with The Plus Addons for Elementor?** A: The same Mobile Menu widget also supports a sticky bottom mobile menu and a popup mobile menu with an Elementor template. That makes it useful when you want different navigation behavior without changing tools inside Elementor. Related docs include [Mobile Menu widget settings overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/), [Create a sticky bottom mobile menu](https://theplusaddons.com/docs/create-a-sticky-bottom-mobile-menu-in-elementor/), and [Create a popup mobile menu with an Elementor template](https://theplusaddons.com/docs/create-a-popup-mobile-menu-with-elementor-template/).