---
title: "Mobile Menu Widget Settings Overview"
url: https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/
date: 2023-10-28
modified: 2026-04-10
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 offers a Mobile Menu widget that requires the PRO version to access its features.
- Users can select from two mobile menu styles: Off Canvas Menu and Swiper Menu.
- The Mobile Menu widget allows for a fixed or absolute position, ideal for creating sticky bottom mobile menus.
- The widget includes options to style menu items, including icon/image style and overall menu typography.

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=gliFrxbNgrc

## 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 to edit 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. Add the widget to your header template to ensure it appears across your site. You can customize menu items, icons, and links directly within the widget settings. Remember to select a styleu2014either single or split mobile menuu2014based on your design preference.

**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. It also supports creating off canvas and swiper menus, providing flexibility in design. Using these features can enhance user experience on mobile devices, making navigation easier and more visually appealing.

**Q: How do I create a sticky bottom mobile menu in Elementor?**
A: To create a sticky bottom mobile menu, select the Fixed position option in the Mobile Menu widget settings. This keeps the menu anchored at the bottom of the screen, ensuring it's always accessible to users. This is particularly useful for enhancing navigation on mobile devices, as it allows users to reach menu options quickly without scrolling.

**Q: What common mistakes do users make when setting up the Mobile Menu widget?**
A: A common mistake is not activating the Mobile Menu widget after installation. Ensure you go to The Plus Addons u2192 Widgets and toggle on the Mobile Menu. Additionally, users often overlook the importance of setting the minimum width for the mobile menu visibility, which can lead to display issues on smaller screens.

**Q: What settings work best for a mobile menu in Elementor?**
A: For optimal performance, use the Fixed position setting for a sticky bottom mobile menu, and choose the Swiper option for a more dynamic menu experience. It's also beneficial to enable the Active Page Indicator toggle to highlight the current menu item, enhancing user navigation and experience.