Mobile Menu Widget Settings Overview

Updated on March 7, 2024 by Ananda
Table Of Content

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.

Required Setup

Learn via Video Tutorial:

How to Activate the Mobile Menu Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.
Mobile menu activate

Key Features

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 or you can use Elementor Pro if you are already using it.

Mobile Menu

From the Style dropdown, you have to select a style. Here, you’ll find two styles –

Mobile menu content

Style 1 – For creating a single mobile menu.

Style 2 – For creating a split mobile menu.

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

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.

Mobile menu menu 1

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.

Mobile menu extra toggle

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.

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 – 

Mobile menu extra options

Swiper – To create a swiper mobile menu.

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

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.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X