< All Topics

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.

Pro tip
Keep the sticky menu simple and less confusing. Don’t jumble up the menu structure by adding too many nested menu items to create a negative user experience.

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.

Table Of Contents

General Steps

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.

1. Content

Navigation Bar

Menu Direction

We have provided you with 3 unique menu options to choose from.

Horizontal Menu
Vertical Menu
Vertical Side Menu

Select Menu

Select your desired menu from the dropdown. (Note: You have to first create your menu under Appearance > Menu)

How to Select Menu in the Sticky Navigation Widget.

Menu Hover/Click

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.

Menu Effects

Set any one of the desired menu animation effects from the dropdown.

Extra Options

There are some special options to look into.

Alignment

Set the position of your menu using the icons. You can set it to left, center or right.

Sticky Menu

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.

Mobile Menu

Responsive Mobile Menu

Slide the button to Show to enable this option. It will present advanced options to make your menu responsive.

Menu Type

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.

Navigation Alignment

Set the position of your menu in mobile using the icons. You can set it to left, center or right.

Menu Content

Select your menu content from the dropdown. It can be a normal WordPress menu or a Saved Elementor Template.

Select Menu

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.

2. Style

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

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View On Scroll View Animation Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?