---
title: "How to Create a Swiper Mobile Menu in Elementor?"
url: https://theplusaddons.com/docs/create-a-swiper-mobile-menu-in-elementor/
date: 2023-10-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "When a mobile menu has more links than fit across a phone screen, a swipeable bar keeps every link at a readable size. The Mobile Menu widget from The Plus..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Swiper-Mobile-Menu-in-Elementor_-1024x536.jpg
word_count: 549
---

# How to Create a Swiper Mobile Menu in Elementor?

## 

- The Plus Addons for Elementor Mobile Menu widget shows items as a swipeable strip when Display is set to Swiper, and on a 390 px wide phone twelve items extend beyond the screen so visitors swipe left and right to reach them.
- Swiper keeps each item at its own width, 70 px by default, while Columns shares the bar width equally and can wrap many items onto a second row.
- The Mobile Menu widget is a Pro widget, and the bar hides on screens wider than the Open Mobile Menu value, such as 767.

When a mobile menu has more links than fit across a phone screen, a swipeable bar keeps every link at a readable size.

The **Mobile Menu** widget from The Plus Addons for Elementor shows its items as a strip that visitors swipe left and right when **Display** is set to **Swiper**.

*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 Swiper Mobile Menu

- Add the **Mobile Menu** widget. In **Content > Mobile Menu**, keep **Style** on the first picture, **Style 1**, and choose a **Position** (Fixed with Bottom is the default).

![Style 1 selected in the Mobile Menu section, with the menu bar at the bottom of the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-style.webp)

- Set **Open Mobile Menu** to the widest screen that should show the menu, for example **767**.

- Open **Menu 1** and add your items: an **Icon** or **Image**, **Text** and **Link** for each one. Add more items than fit across a phone screen.

![An item in the Menu 1 repeater opened, showing its icon, Text and Link fields](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-menu1-item.webp)

- Open **Extra Options** and make sure **Display** is set to **Swiper** (the default). Publish the page and open it on a phone.

![Display set to Swiper in the Extra Options section, with the menu strip in the editor's mobile preview](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-display.webp)

On a 390 px wide phone, twelve items make a strip wider than the screen. The first items are visible and the rest are reached by swiping:

![Swiper mobile menu on a phone showing the first items of a twelve-item menu along the bottom of the screen](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-swiper.webp)

![Animated demo of a swiper mobile menu being swiped left and right](https://theplusaddons.com/wp-content/uploads/2023/10/mobile-menu-swiper-menu-demo.gif)

## Swiper or Columns?

| Display | What visitors see |
| ------- | ----------------- |
| **Swiper** (default) | Items keep their width (70 px by default) and form a strip that scrolls sideways. With only a few items the strip does not fill the bar. |
| **Columns** | Items share the width of the bar equally. With many items they wrap onto a second row, which makes the bar taller. |

The same twelve items with **Columns** wrap onto two rows:

![Mobile menu with Display set to Columns on a phone, twelve items wrapped onto two rows](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-columns-many.webp)

## How It Behaves

- The strip follows the finger and keeps moving a little after release, so visitors can flick through long menus.- The Swiper script is only loaded when **Display** is Swiper.- With **Style 2** (split menu), the left and right sides each become their own swipeable strip.- The **Active Page Indicator** in Extra Options marks the item whose link is the page being viewed. It does not change while swiping.

## Limitations

- The default item icon does not show on the page. Choose an icon from the library for every item.- There is no arrow or dot navigation: visitors have to swipe to find items that are off screen.

## Troubleshooting

### The menu shows on desktop too

Set **Open Mobile Menu**. The bar is hidden on screens wider than that value.

### The items do not fill the bar

With only a few items, use **Columns** instead of Swiper.

### The bar grew to two rows

**Columns** wraps long menus. Switch to **Swiper** or remove items.

## Related Docs

- [Mobile Menu widget settings overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/)- [Create a split mobile menu](https://theplusaddons.com/docs/create-a-split-mobile-menu-in-elementor/)- [Create a sticky bottom mobile menu](https://theplusaddons.com/docs/create-a-sticky-bottom-mobile-menu-in-elementor/)

## Frequently Asked Questions

**Q: How do I make a mobile menu swipe sideways instead of wrapping into rows in Elementor?**
A: Set the Mobile Menu widget’s Display to Swiper. In that mode, the items keep their width, 70 px by default, and form a sideways strip that visitors swipe left and right. That matters when you have more links than fit across a phone screen, because the menu stays readable instead of shrinking everything to cram it in. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this behavior through the Mobile Menu widget.

**Q: Why does my mobile menu show on desktop too?**
A: The Open Mobile Menu value controls when the bar stays hidden on wider screens. If it appears on desktop, the breakpoint is set too high for that layout. A common example from the page is 767, which keeps the menu limited to smaller screens. That makes sense for a mobile-first bar because the widget is meant to show as a swipeable strip on phones, not as a full desktop navigation.

**Q: What should I use if I want the menu items to fill the whole bar?**
A: Use Columns instead of Swiper when you want the items to share the bar width equally. Swiper keeps each item at its own width, so a short menu can leave empty space. Columns is better for compact menus where visual balance matters more than sideways scrolling. The tradeoff is that with many items, Columns can wrap onto a second row and make the bar taller.

**Q: Why did my mobile menu turn into two rows?**
A: That happens when Display is set to Columns and there are too many items to fit on one line. Columns wraps long menus onto a second row, which increases the bar height. If you want a single-row mobile bar, switch back to Swiper or remove some items. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses Swiper specifically to avoid that wrapping behavior.

**Q: Can I use this mobile menu in a header template so it shows on every page?**
A: The Mobile Menu widget can be added to any page or to a header template, and the page specifically mentions using a header template such as one built with the free Nexter Builder to show it everywhere. That setup is useful when you want one mobile navigation bar across the site instead of placing it manually on each page. For widget settings details, see [Mobile Menu widget settings overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/).

**Q: What are the main limits of the swiper mobile menu?**
A: Two limits stand out: the default item icon does not show on the page, so each item needs an icon from the library, and there is no arrow or dot navigation. Visitors have to swipe to reach off-screen items. That means icon choice matters more than usual because it becomes part of how people recognize each link while scrolling through a long strip.