Creating a sticky menu using our Sticky Navigation Widget is a breeze. It helps you create an awesome looking menu navigation for your website in no time. A Sticky Navigation is a crucial component of your website which your visitors see when they land on your website. So, it should be easy to understand for your users and less confusing.
How to use the Sticky Navigation Widget of The Plus Addons For Elementor
The Sticky Navigation widget comes with 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.
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 menu 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.
The Style tab is used for customizing the appearance of all the Navigation Menu widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.
View Style Tab Tutorial