--- title: "How to Create a Swiper Menu for Mobile in Elementor?" url: https://theplusaddons.com/docs/create-a-swiper-menu-for-mobile-in-elementor/ date: 2023-10-27 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "Do you want your main menu items always visible on phones, in a row visitors can swipe? A swiper menu skips the hamburger button altogether, like the category bars in..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Swiper-Menu-for-Mobile-in-Elementor_-1024x536.jpg word_count: 460 --- # How to Create a Swiper Menu for Mobile in Elementor? ## - The Plus Addons for Elementor Navigation Menu widget in Pro includes Swiper as one of three mobile menu types, while Navigation Menu Lite does not have this option. - Swiper menu keeps top-level items always visible in one row on mobile widths, with no hamburger button and no submenu items. - The setup uses Content > Mobile Menu with Responsive Mobile Menu on, Menu Type set to Swiper, and Open Mobile Menu at the default 991px; a short menu with 4-8 top-level items works best. Do you want your main menu items always visible on phones, in a row visitors can swipe? A swiper menu skips the hamburger button altogether, like the category bars in many apps. With the Navigation Menu widget from The Plus Addons for Elementor, it is one of three mobile menu types. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text) Table Of Contents ## Before You Start - **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type. ## What a Swiper Menu Looks Like - **No button.** The menu is always on screen at mobile widths.- **One row.** Your top-level items sit side by side; visitors swipe left and right to see the rest.- **Top-level items only.** Submenu items are not shown. Put anything important at the top level, or use the Toggle or Off Canvas type. ![A swipeable row of top-level menu items on a phone](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-swiper.webp) ## Steps - Set up the desktop menu in **Layout** and **Content**.- In **Content > Mobile Menu**, keep **Responsive Mobile Menu** on and set **Menu Type** to **Swiper**.- Set **Open Mobile Menu**. **Open Mobile Menu** (default 991px) is the *widest* screen that gets the mobile menu. At that width and narrower, visitors see the mobile menu; wider screens get the normal menu.- Set **Menu Content** to **Normal Menu** and pick the menu in **Select Menu**. A short menu with 4–8 top-level items works best.- Use **Navigation Alignment** to line the items up. ![Menu Type set to Swiper in the Mobile Menu section](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-swiper-type.webp) Now you’ll see a swiper menu on mobile. ## Limitations - **Pro only.** Navigation Menu Lite only has a toggle mobile menu.- **No submenus.** Only top-level items are shown.- **No toggle button, so no Toggle Style or Toggle Alignment.**- **Template Menu** shows the whole template in place of the row, always visible. It is not a hidden menu. ## Troubleshooting ### My submenu items are missing That is how Swiper works. Use the Toggle or Off Canvas type to show submenus. ### The row does not swipe The items already fit the screen, so there is nothing to swipe. Otherwise, check for JavaScript errors, and that no custom CSS changes the menu’s width. ### The row is empty Pick a menu in **Mobile Menu > Select Menu**. ## Related Docs - [Create a toggle menu for mobile](https://theplusaddons.com/docs/create-a-toggle-menu-for-mobile-in-elementor/)- [Create an off canvas mobile menu](https://theplusaddons.com/docs/create-an-off-canvas-mobile-menu-in-elementor/)- [Navigation Menu widget: settings overview](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/) ## Frequently Asked Questions **Q: What do I need before creating a swiper menu for mobile in Elementor?** A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor Pro, plus a header template and a WordPress menu if you use the Default menu type. The widget has to be installed and activated, and the Navigation Menu widget must be switched on under The Plus Addons > Widgets. That matters because the swiper option is part of the Pro widget, not the free Navigation Menu Lite widget. **Q: When should I use a swiper menu instead of a toggle or off canvas menu?** A: A swiper menu fits cases where you want top-level items always visible on phones in a single row that visitors can swipe left and right. It is a better fit when submenu items are not important on mobile, because Swiper shows only top-level items. If you need submenus, the page points to Toggle or Off Canvas instead, since those types are built for deeper navigation. **Q: Why are my submenu items missing in the mobile swiper menu?** A: That is expected behavior for Swiper. The menu shows only top-level items, with no submenu display at all. The practical fix is to move anything important into the top level, or switch to the Toggle or Off Canvas type if you need submenus on mobile. This is one of the main tradeoffs of using a swiper-style row instead of a collapsible menu. **Q: Why does my swiper menu row not swipe on mobile?** A: If the items already fit across the screen, there is nothing to swipe, so the row can look static even when Swiper is working. If it still feels broken, the page calls out JavaScript errors and custom CSS that changes the menu width as common causes. That means width and script issues matter more here than the menu setting itself. **Q: What should I do if my swiper menu row is empty?** A: An empty row usually means no menu was selected in Mobile Menu > Select Menu. The swiper layout still needs an actual WordPress menu assigned through Menu Content set to Normal Menu. In practice, this is a content-assignment issue, not a swipe issue, so checking the selected menu is the fastest fix. **Q: Is a swiper menu a good choice for short mobile navigation?** A: Swiper works best with a short menu of about 4 to 8 top-level items. That range keeps the row readable while still leaving enough content to justify horizontal swiping. The page also notes that Open Mobile Menu defaults to 991px, so at that width and below visitors see the mobile version while wider screens keep the normal desktop menu.