Elementor Mobile Menu Widget Tutorial

Intro

In today’s digital age, optimizing websites for mobile users is crucial, as most people access the internet through their smartphones. Recognizing this need, Premium Addons’ Elementor Mobile Menu widget offers a powerful solution for creating responsive and user-friendly menus tailored for mobile devices. Seamlessly integrating with Elementor, this widget provides a range of features such as sticky menus, side slide menus, and customizable icons. Additionally, the widget includes a carousel feature, allowing for a dynamic display of menu items. With these tools, web developers can design menus that not only enhance navigation but also maintain the aesthetic consistency of their websites, ensuring a smooth user experience on smaller screens.

elementor mobile menu widget featured image

Click here to check Elementor Mobile Menu Widget demo.

Requirements:

Key Features

  • Menu Items
  • Display Options
  • Carousel

Menu Items

  • Menu Item Fields: Each menu item can be customized. The fields include:
    • Item Name Field: Input field to specify the name of the menu item.
    • Clone Button: Allows you to duplicate a menu item.
    • Delete Button: Enables you to remove a menu item.
  • Add Item Button: Adds a new menu item to the list.
Elementor Mobile Menu Widget Menu Items: add items, and items' settings
Elementor Mobile Menu Widget – Menu Items
Item Content Settings
  • Icon Type: Dropdown to select the type of icon.
  • Icon: Displays the chosen icon.
  • Draw Icon: Toggle to enable or disable drawing the icon.
  • Path Thickness: Slider to adjust the thickness of the icon’s path.
  • Title: Toggle to enable or disable the item title.
  • Item Title: Input field to specify the title of the menu item.
Content settings for Menu Item #6 with options for icon type, drawing icon, path thickness, and item title in Elementor.
Elementor Mobile Menu Widget – Items’ Content Settings
  • Action Settings
    • Action: Dropdown to select the action type to be link
      • Link/URL: Dropdown to specify the type of URL (external or internal).
      • URL: Input field to enter the URL.
Elementor Mobile Menu Widget – Action URL Type
Please note that Off-canvas action type requires Premium Addons PRO installed and activated on your website.
  • Off-canvas Action Settings
    • Action: Dropdown to select the action type as Open Off-canvas.
    • Off-canvas ID: Input field to specify the ID of the off-canvas element.
Off-canvas action settings for Menu Item #6 with options for action type and Off-canvas ID input in Elementor
Elementor Mobile Menu Widget – Action Off-canvas Type
Please note that Badge option requires Premium Addons PRO installed and activated on your website.
  • Badge Settings
    • Badge: Toggle to enable or disable the badge.
    • Badge Text: Input field to specify the text of the badge.
    • Horizontal Position: Slider to adjust the horizontal position of the badge.
    • Vertical Position: Slider to adjust the vertical position of the badge.
Badge settings for Menu Item with options for enabling badge, badge text input, horizontal position, and vertical position in Elementor
Elementor Mobile Menu Widget – Badge Settings
Item Style Settings
  • Minimum Height: Slider to set the minimum height of the menu item.
  • Icon Color: Color picker to select the icon color.
  • Icon Hover Color: Color picker to select the icon color on hover.
  • Icon Size: Slider to adjust the size of the icon.
  • Stroke Color: Color picker to select the stroke color for the icon.
  • Background Type: Dropdown to choose the background type (color or image).
  • Border Type: Dropdown to select the type of border (solid, dashed, etc.).
  • Border Radius: Slider to adjust the border radius, making corners rounded.
  • Box Shadow: Color picker and settings to add and customize the box shadow.
  • Badge Text Color: Color picker to select the text color for the badge.
  • Badge Background: Color picker to select the background color for the badge.
  • Margin: Input fields to set the top, right, bottom, and left margins of the menu item.
  • Padding: Input fields to set the top, right, bottom, and left padding of the menu item.
Elementor Mobile Menu Widget Style settings for Menu Item #1 with options for icon color, size, stroke color, background, border, box shadow, and badge colors, etc...
Elementor Mobile Menu Widget – Items’ Style Settings

Display Options

Please note that Active Item Indicator option requires Premium Addons PRO installed and activated on your website.
  • Menu Direction: Dropdown to select the direction of the mobile menu (vertical or horizontal).
  • Menu Position: Dropdown to set the position of Elementor Mobile Menu (relative or absolute).
  • Menu Width: Slider to adjust the width of Elementor Mobile Menu.
  • Items Spacing: Slider to set the spacing between menu items.
  • Menu Alignment: Buttons to align the menu items (left, center, right).
  • Item Display: Dropdown to choose how items are displayed (block or inline).
  • Active Item Indicator: Toggle to enable or disable the indicator for the active menu item.
Elementor Mobile Menu Widget Display options for configuring the direction, position, width, item spacing, alignment, item display, and active item indicator of the mobile menu in Elementor.
Elementor Mobile Menu Widget – Display Options

Carousel Settings

  • Enable Carousel: Enable or disable the carousel feature.
  • Items to Show: Specify the number of items to display in the carousel at once.
  • Transition Speed (ms): Set the speed of the carousel animation in milliseconds.
  • Center Mode: Enable or disable center mode, which centers the active slide.
  • Slides’ Spacing: Set the spacing between slides in pixels.
  • Navigation Arrows: Toggle to enable or disable navigation arrows for the carousel.
  • Arrows Position: Slider to adjust the position of the navigation arrows.
Elementor Mobile Menu Widget Carousel settings for enabling carousel, items to show, transition speed, center mode, slides' spacing, navigation arrows, and arrows position in Elementor.
Elementor Mobile Menu Widget – Carousel Settings

Style

Menu Items

  • Minimum Height: Slider to set the minimum height of the menu item.
  • Background Type: Select and customize the background type (color or image).
  • Border Type: Dropdown to select the type of border (e.g., solid, dashed).
  • Border Radius: Adjust the border radius for rounded corners.
  • Box Shadow: Add and customize the box shadow.
  • Padding: Input fields to set padding values for top, right, bottom, and left sides of the menu item.
Elementor Mobile Menu Widget Style settings for customizing the minimum height, background type, border type, border radius, box shadow, and padding of the mobile menu items in Elementor.
Elementor Mobile Menu Widget – Menu Item Style

Item Icon

  • Color: Color picker to select the icon color.
  • Hover Color: Color picker to select the icon color when hovered over.
  • Icon Size: Slider to adjust the size of the icon.
  • Stroke Color: Color picker to select the stroke color of the icon.
  • Margin: Input fields to set the margin values for top, right, bottom, and left sides of the icon.
Elementor Mobile Menu Widget Item icon settings for configuring color, hover color, icon size, stroke color, and margin in Elementor.
Elementor Mobile Menu Widget – Item Icon Style

Item Title

  • Color: Customize the color of the separator.
  • Size: Adjust the thickness or width of the separator line.
  • Spacing: Control the amount of space above and below the separator, typically in pixels (px).
Elementor Mobile Menu Widget Item title settings for configuring color, hover color, typography, and text shadow in Elementor.
Elementor Mobile Menu Widget – Item Title Style

Item Badge

  • Color: Color picker to select the text color of the badge.
  • Hover Color: Color picker to select the text color of the badge when hovered over.
  • Typography: Settings to customize the typography of the badge text, including font family, size, weight, and style.
  • Background Color: Color picker to select the background color of the badge.
  • Background Hover Color: Color picker to select the background color of the badge when hovered over.
  • Text Shadow: Settings to add and customize the text shadow for the badge text.
  • Padding: Input fields to set padding values for the top, right, bottom, and left sides of the badge.
Elementor Mobile Menu Widget Item badge settings for configuring color, hover color, typography, background color, background hover color, text shadow, and padding in Elementor.
Elementor Mobile Menu Widget – Item Badge Style

Active Menu Item

  • Background Type: Dropdown and color picker to select and customize the background type (color or image) for the active menu item.
  • Border Type: Dropdown to select the type of border (e.g., solid, dashed) for the active menu item.
  • Border Radius: Slider to adjust the border radius, creating rounded corners for the active menu item.
  • Box Shadow: Settings to add and customize the box shadow for the active menu item.
Elementor Mobile Menu Widget Active menu item settings for configuring background type, border type, border radius, and box shadow in Elementor.
Elementor Mobile Menu Widget – Active Menu Item Style

Active Item Icon

  • Color: Color picker to select the color of the active item icon.
  • Hover Color: Color picker to select the color of the active item icon when hovered over.
  • Icon Size: Slider to adjust the size of the active item icon.
  • Stroke Color: Color picker to select the stroke color of the active item icon.
Elementor Mobile Menu Widget Active item icon settings for configuring color, hover color, icon size, and stroke color in Elementor.
Elementor Mobile Menu Widget – Active Item Icon Style

Active Item Title

  • Color: Color picker to select the color of the active item title.
  • Hover Color: Color picker to select the color of the active item title when hovered over.
  • Text Shadow: Settings to add and customize the text shadow for the active item title.
Elementor Mobile Menu Widget Active item title settings for configuring color, hover color, and text shadow in Elementor.
Elementor Mobile Menu Widget – Active Item Title Style

Active Item Indicator

  • Vertical Position: Slider to adjust the vertical position of the active item indicator.
  • Color: Color picker to select the color of the active item indicator.
  • Hover Color: Color picker to select the color of the active item indicator when hovered over.
  • Width: Slider to adjust the width of the active item indicator.
  • Height: Slider to adjust the height of the active item indicator.
  • Border Radius: Slider to adjust the border radius, creating rounded corners for the active item indicator.
Elementor Mobile Menu Widget Active item indicator settings for configuring vertical position, color, hover color, width, height, and border radius in Elementor.
Elementor Mobile Menu Widget – Active Item Indicator Style

Carousel

  • Color: Color picker to select the color for carousel items.
  • Hover Color: Color picker to select the color for carousel items when hovered over.
  • Size: Slider to adjust the size of the carousel items.
  • Background Color: Color picker to select the background color of the carousel items.
  • Background Hover Color: Color picker to select the background color of the carousel items when hovered over.
  • Border Radius: Slider to adjust the border radius for carousel items, creating rounded corners.
  • Padding: Input fields to set padding values for the top, right, bottom, and left sides of the carousel items.
Elementor Mobile Menu Widget Carousel style settings for configuring color, hover color, size, background color, background hover color, border radius, and padding in Elementor.
Elementor Mobile Menu Widget – Carousel Style

Item Container

  • Background Type: Dropdown and color picker to select and customize the background type (color or image) for the items container.
  • Border Type: Dropdown to select the type of border (e.g., solid, dashed) for the items container.
  • Border Radius: Input fields to set the border radius values for the top, right, bottom, and left sides, creating rounded corners for the items container.
  • Box Shadow: Settings to add and customize the box shadow for the items container.
  • Margin: Input fields to set the margin values for the top, right, bottom, and left sides of the items container.
  • Padding: Input fields to set the padding values for the top, right, bottom, and left sides of the items container.
Elementor Mobile Menu Widget Items container settings for configuring background type, border type, border radius, box shadow, margin, and padding in Elementor.
Elementor Mobile Menu Widget – Carousel Style

Conclusion

Elementor Mobile Menu widget by Premium Addons stands out for its versatility and extensive customization options. From detailed menu item settings, including icon types and animation controls, to advanced style configurations like background types, borders, and box shadows, this widget empowers users to create highly personalized mobile menus. The inclusion of the carousel feature adds another layer of interactivity, enabling a dynamic and engaging presentation of menu items. Key use cases include e-commerce sites needing intuitive navigation, blogs with rich content categories, and corporate websites aiming for a sleek, professional look. The main selling points are its seamless Elementor integration, ease of use, and the ability to enhance mobile user experience significantly, making it an essential tool for modern web development.


If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.