Creating a horizontal or a vertical menu using our Navigation Menu Widget is a breeze. It helps you create an awesome looking menu navigation for your website in no time.
A Menu Navigation is a crucial component of your website which your visitors see when they land on your website. So, it should be easy to navigate for your users and less confusing.
How to use the Navigation Menu Widget of The Plus Addons For Elementor
The Navigation widget comes with 3 different layout styles to choose from. Let’s understand how to use this widget in the tutorial below.
Search for the Navigation Menu widget from the Elementor screen in the left and then drag and drop it into the content building area.
After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
We have provided you with 3 unique menu options to choose from.
- Horizontal Menu
- Vertical Menu
- Vertical Side Menu
Select your desired menu from the dropdown. (Note: You have to first create your menu under Appearance > Menu)
This option lets you set the behaviour of your submenu. You can select any one of the following options from the dropdown.
Hover Submenu: It means the submenu will be displayed upon hovering the menu.
Click Submenu: It means the submenu will be displayed by clicking the menu.
Set any one of the desired submenu dropdown animation effects from the dropdown.
There are some special options to look into.
Set the position of your menu using the icons. You can set it to left, center or right.
Slide the toggle button to Show to enable the sticky menu option. This will make your menu sticky to the top when you scroll down the page.
Responsive Mobile Menu
Slide the button to Show to enable this option. It will present advanced options to make your menu responsive.
Select your desired menu type. The options are:
Toggle: Shows a hamburger toggle icon to open and close the menu.
Swiper: Swipe your menu from left to right or vice versa.
Open Mobile Menu
Set the mobile responsive breakpoint. Use the slider to set your desired value.
Set the position of your menu in mobile using the icons. You can set it to left, center or right.
Select your menu content from the dropdown. It can be a normal WordPress menu or a Saved Elementor Template.
Select your desired menu from the dropdown for mobile.
Mobile Click Close Menu
Slide the button to Show to enable closing the mobile menu on click.
Set the typography of your main menu here. Apart from that, you can also set cosmetic options such as Padding, Indicator Style, Color, Border Radius, Background and Box Shadow options.
Very similarly as explained above, set cosmetic options for the submenu.
Main & Sub Menu Label
Set the typography, Horizontal/Vertical offset, Padding, Color, Border Radius, Background and Box Shadow options.
Mobile Menu Label
Just like the above options, you can set it for the Mobile Menu Label.
Select your main menu hover style. Based on your selection, you will have to choose the border normal / hover color, border width, and alignment border adjust settings. You can also set animation effects for your submenu using the toggle buttons below.