The “WordPress Menu Widget“ helps you to easily create navigation menus for free on your Elementor website. It offers advanced styling options and mobile-friendly behavior, enabling you to create multi-level menus quickly. You can customize the widget using its wide range of customization options.
Let’s look at each of the options in the “WordPress Menu Widget” below.
Create a Menu on Your WordPress Elementor Website.
To use this widget, first you have to create a menu.
Go to WordPress dashboard, got to Appearance>>Menus>>Give you menu a name.
You can also set the display location of menu.
Add item to your menu from the available options like pages, posts etc. You just have to click on checkbox next to any item and click add to menu.
After that select the items and drag them into the order you want. To make a submenu, drop it beneath the item you want to parent it and drag it to the right. Now save the changes and your menu is now ready to use in the widget.
Add a Free WordPress Menu for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “WordPress Menu”
- Hover over the widget in the search results and click install
- Add your “WordPress Menu” widget to any Elementor Page
General Settings in Elementor WordPress Menu
Select Menu
Select the desired menu you want to display.
Max Depth
Select the depth of menu you want to show.
- All Depths
- 1
- 2
- 3
Align
Set the alignment to WordPress Menu.
- Inherit
- Start
- Center
- End
- Space Between
- Stretch
Show Expand Collapse Icon
Show/Hide the expand collapse icon.
Icon Spacing
Set the spacing between icons.
First Level Expand Icon
Choose icon for first level expand.
Expand Icon
Choose icon for expand button.
Collapse Icon
Choose icon for collapse button.
Responsive Settings in Elementor WordPress Menu
Mobile Icon Open
Choose icon for open button for mobile screen.
Mobile Icon Close
Choose icon for close button for mobile screen.
Responsive Breakpoint
Set the responsive breakpoint for mobile screen.
Full Width On Mobile
Turn on to show menu on full width.
Responsive Menu Spacing
Set the spacing for menu in responsive layout.
Elementor WordPress Menu Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Menu Styling in Elementor WordPress Menu
Set the gap for menu items.
Menu Items Styling in Elementor WordPress Menu
You can set the menu item background color, item color, border, padding, typography, icon size, and border radius.
Menu Sub Items Styling in Elementor WordPress Menu
You can set the background, item color, border color, typography, and padding for menu sub items.
Menu Sub Sub Items Styling in Elementor WordPress Menu
You can set the background, item color, border color, typography, and padding for menu sub sub items.
Menu Sub Sub Sub Items Styling in Elementor WordPress Menu
You can set the background, item color, border color, typography, and padding for menu sub sub sub items.
Dropdown Styling in Elementor WordPress Menu
You can set the dropdown width, and dropdown offset.
Responsive Menu Styling in Elementor WordPress Menu
Here, You can set the burger menu open and close background, icon color, size, and positioning.
Usage Examples of Elementor WordPress Menu
Here are some live use cases for the WordPress Menu widget.
Free Elementor WordPress Menu with Social Icons.
Thank you for using the WordPress Menu Widget for Elementor! With its flexible design and seamless integration, this is the best WordPress Menu Widget for Elementor, perfect for creating stylish and user-friendly navigation menus. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
