Navigation Menu

< All Topics

Every website needs to have the perfect header for your website. A header with the website navigation is all you need. Also, you can add your products or images if you want with the Navigation Builder. So you need to make a Navigation that not only looks good but really showcases your website. You can create such a header by using the Navigation Builder widget. 

Pro tip
Why not create your own personalized header using this widget. Showcase your products in your main menu itself. Make sure to add proper chronology in your Menu.

How to use the Navigation Builder Widget of The Plus Addons For Elementor

The Navigation Builder widget comes with multiple functions. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Navigation Builder 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

Select Menu in Navigation builder widget.

Navigation Bar 

Menu Direction 

Select the direction of your Menu. You can choose from the Horizontal, Vertical, and Vertical Side Menu. 

Select Menu  

You can select the Menu you wanna display on the header. 

Menu Hover/Click 

You can select the option Hover or Click submenu to open the Menu.  

Menu Effects

Here you can select the type of animation the Menu will display on appearing. 

Extra Options

Alignment  

You can either set the alignment of menu options from left, right and center. 

Sticky Menu

Enable this option by sliding the icon to display a sticky Menu. 

Extra Options in Navigation builder widget.

Mobile Menu

Responsive Mobile Menu  

Enable this option if you want to have a Responsive Menu.  

Menu Type  

Select from the types of Menus you want to display between toggle and Swiper.

Open Mobile Menu  

Specify the pixels after which you want to display the Mobile Menu.  

Toggle Style  

Specify which type of Toggle you want. 

Toggle Alignment 

Select the Alignment of toggle either left, right, or center. 

Navigation Alignment 

Select the Alignment of the Navigation either left, right or center

Menu Content  

You can either select a Normal or Template Menu.   

Select Menu  

You can select the Menu you wanna display on the header.

Mobile Click Close Menu 

Enable if you want to apply click close menu settings.  



2. Style

The Style tab is used for customizing the appearance of all the Navigation Builder 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 Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab 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?