Elementor Mobile Menu Widget Tutorial

Intro

Elementor Mobile Menu widget in Premium Addons for Elementor plugin offers a solution for creating responsive mobile menu in Elementor. This widget provides a range of options. You can set the menu direction to horizontal or vertical, make it sticky. Also, you can use it with our Premium Off Canvas widget to open off canvas content menu when one of the menu items is clicked.

Click here to check Elementor Mobile Menu Widget demo.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Make sure that the feature is enabled so you can find it in the Elementor editor.
• Premium Addons Pro is required for:
  • In Menu Items Repeater
    • Action -> Open Off-canvas
    • Badge
  • Active Item Indicator
  • Carousel
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Key Features

• Menu Items
• Display Options
• Carousel

Elementor 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.

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.

• 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.

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. Refer to this article for more information.

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.

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.

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.

Carousel Settings

Please note that Carousel option requires Premium Addons PRO installed and activated on your website.

• 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.

---

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.

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.

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).

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.

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.

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.

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.

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.

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.

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.

---

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.