---
title: "Mobile Menu Widget Settings Overview"
url: https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/
date: 2023-10-28
modified: 2026-04-30
author: "Aditya Sharma"
description: "As more and more users access websites on their smartphones and tablets, having a seamlessly functional and visually appealing mobile menu is not just a nice-to-have but essential for providing..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/Mobile-Menu-Widget_-Settings-Overview-1024x536.jpg
word_count: 820
---

# Mobile Menu Widget Settings Overview

## Key Takeaways

- The Plus Addons for Elementor requires the PRO version to access the Mobile Menu widget.
- Mobile Menu widget offers two styles: Style 1 for a single mobile menu and Style 2 for a split mobile menu.
- Users can create an off canvas menu or a swiper mobile menu using the Mobile Menu widget.
- The Mobile Menu widget allows customization of menu items, including adding icons, text, and links.

As more and more users access websites on their smartphones and tablets, having a seamlessly functional and visually appealing mobile menu is not just a nice-to-have but essential for providing a seamless browsing experience. 

With the Mobile Menu widget from The Plus Addons for Elementor, you can easily create a beautiful mobile menu for your Elementor website.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-mobile-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Mobile Menu widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Mobile Menu and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=0J0noGPRb7c

## How to Activate the Mobile Menu Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/10/mobile-menu.png)

## Key Features

- **Two Mobile Menu Style** - You can select from two mobile menu styles.

- **Off Canvas Menu** - You can easily [create an off canvas menu with an Elementor template](https://theplusaddons.com/docs//create-a-popup-mobile-menu-with-elementor-template/).

- **Swiper Menu** - You can easily create a swiper mobile menu.

## How to Use the Mobile Menu Widget in Elementor? 

To use the Mobile Menu widget, you should add it in the header template, so the menu is available on the entire website. 

To create the header template, you can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or you can use Elementor Pro if you are already using it.

### Mobile Menu

From the **Style** section, you have to select a style. Here, you’ll find two styles -

**Style 1** - For creating a single mobile menu.

**Style 2** - For [creating a split mobile menu](https://theplusaddons.com/docs//create-a-split-mobile-menu-in-elementor/).

Let’s select Style 1 here.

From the **Position** dropdown, you can set the menu position. Here you’ll find two options - 

**Fixed** - To create a fixed bottom or top mobile menu. Ideal for creating a [sticky bottom mobile menu](https://theplusaddons.com/docs//create-a-sticky-bottom-mobile-menu-in-elementor/). 

**Absolute** - This will keep the mobile menu in the container. 

From the **Open Mobile Menu** section, you can specify the minimum width when the mobile menu will be visible.

### Menu 1

Here, you’ll find 4 menu items by default. Open an item. 

From the **Select Icon** dropdown, you can add an icon or image to the menu item.

Then, in the **Text** field, you can add a text to the menu item.

In the **Link** field, you can add the menu link. 

Then you can use the **Pin Text** field, to add a text to highlight the menu item.

You can repeat the same process to edit the remaining items.

To add more menu items, click on the **+ Add Item** button.

### Extra Toggle

You can enable the **Extra Toggle** toggle, to add an extra menu item or toggle button.

From the **Select Toggle Icon** dropdown, you can add an icon or image to the toggle button.

Then, from the **Text** field, you can add a text to the toggle button.

From the **Content** dropdown, you can select the content type of the menu item or toggle button. Here you’ll find two options - 

**Link** - To add a normal link.

**Template** - To [create an off canvas popup menu with an Elementor template](https://theplusaddons.com/docs//create-a-popup-mobile-menu-with-elementor-template/).

Let’s select **Link** here.

In the **Link** field, you can add the menu link.

### Extra Options

From the **Display** dropdown, you can set the display of the mobile menu. Here, you’ll find two options - 

**Swiper** - To [create a swiper mobile menu](https://theplusaddons.com/docs//create-a-swiper-mobile-menu-in-elementor/).

**Columns** - To make the menu items fit the screen size.

You can enable the **Active Page Indicator** toggle to highlight the active menu item.

If the menu item pin text is hiding behind other items from the **Pin Text Overflow** dropdown, you can set the overflow to visible to fix the issue.

## How to Style the Mobile Menu Widget in Elementor?

To style the Mobile Menu, you’ll find all the options in the Style tab.

**Icon/Image Style** - From here, you can style the menu item icon and image.

![mobile menu style](https://theplusaddons.com/wp-content/uploads/2023/10/mobile-menu-style.png)

**Extra Toggle Icon/Image Style** - From here, you can style the extra toggle item icon and image.

**Active Page Indicator Style** - From here, you can stye the active page indicator.

**Menu Style** - From here, you can manage the overall mobile menu typography, color, padding, background etc.

**Extra Toggle Style** - From here, you can style the extra toggle menu item or button.

**Content Background Style** - From here, you can manage the menu container padding, background, border, overflow etc.

**Pin Text Options** - From here, you can manage the pin text style.

**Extra Options** - From here, you can set a scroll top offset by enabling the **Show Mobile Menu Scroll Offset** toggle. This will show the menu when you scroll down to equivalent pixels.

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: How do I edit the mobile menu in WordPress Elementor?**
A: To edit the mobile menu in Elementor, you need to use the Mobile Menu widget from The Plus Addons for Elementor. You can add the widget in your header template to ensure it appears throughout your site. From there, you can customize menu items, add icons, and set links. Make sure to select the desired menu style and position for optimal display.

**Q: What are the key features of the Mobile Menu widget?**
A: The Mobile Menu widget offers two styles: a single mobile menu and a split mobile menu. You can create an off-canvas menu or a swiper menu, enhancing user experience on mobile devices. These features allow for greater flexibility in how your menu is presented, catering to different design preferences and usability needs.

**Q: What common mistakes do people make when setting up the mobile menu?**
A: A common mistake is not activating the Mobile Menu widget after installation. Users should navigate to The Plus Addons u2192 Widgets and ensure the Mobile Menu is toggled on. Additionally, neglecting to set the minimum width for visibility can lead to the menu not displaying correctly on smaller screens.

**Q: Are there any limitations with the Mobile Menu widget?**
A: The Mobile Menu widget is a premium feature that requires the PRO version of The Plus Addons for Elementor. Additionally, it is designed specifically for use with Elementor and does not support other page builders like Gutenberg or Divi. This means you won't be able to use the widget if you're not on the correct platform.

**Q: What settings work best for creating an off-canvas mobile menu?**
A: To create an effective off-canvas mobile menu, enable the Extra Toggle option in the widget settings. This allows you to add a toggle button that can link to an off-canvas popup menu. Make sure to choose the appropriate content type for the toggle, either a link or a template, to ensure it functions as intended.