Table Of Contents

Navbar Widget

How to Use Navbar Widget

A navbar/navigation is a user interface element within a webpage that includes links to other sections of the website. Exactly Navbar Widget does the same thing as Navigation does. In the documentation, I will show how to use navigation or navbar using our widget.

To Insert Widget

inserting Navbar Widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, drag the navigation bar into your page.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part (option be added) of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the menu bar.


Navbar Widget settings

Go to the Content tab > Navbar.

This is a section that will let you set what menu you want to show from the Select Menu. Along with you can set alignment (left, right, and center), offset, padding, menu height, etc.

We have taken a special measure to make the Navbar as mobile responsive as possible by adding the Auto Hiding Menu switcher below. What it does is, once you click it, the menu items will stay hidden by the right-hand side in horizontal formation for the Navbar Widget.

Navbar Widget preview

I’m sure you will get the idea after seeing it in preview mode.


dropdown navigation bar

Just, go to the Content tab > Dropdown.

From this section, you can control dropdown and item alignment. In addition, dropdown padding and width.


additional settings of the menu bar

Simply, go to the Content tab > Additional.

This section is here to control the navbar and dropdown behavior ( Delay Show and Hide, Dropdown Duration and Offset).

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design the Navbar Widget in Elementor. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


There is Navbar Style control that will let you set navbar style(Style1, Style2, Style3).

Most importantly, three modes (Normal, Hover, and Active) will support you to style the Navbar in different aspects.

Take a look.

Normal Mode:

navbar style 1 - BdThemes

Hover Mode:

navbar style 2 - BdThemes

Active Mode: What you’ve seen in terms of Normal and Hover, you do the same thing regarding Active mode.


This section will allow you to style Dropdown. And to do that go to Style tab > Dropdown. There are also three modes, in all the modes, you have a chance to style the Dropdown. See the screenshot below.

navbar style 3 - BdThemes

Video Assist

In conclusion, it seems you’ve noticed how funny it is to use our Navbar Widget by Element Pack and found this documentation easy and useful. Watch Video Assist and to get more ideas about the usage of the menu bar, take a tour to the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.