• Products
  • Resources
  • Blog
  • Contact

How to use Navbar widget by Element Pack

  • BdThemes
  • How to use Navbar widget by Element Pack

Table Of Contents

How to use Navbar widget by Element Pack

In this documentation, we will show you how to customize the Navbar widget presented by the Element Pack.

Enable the Navbar widget

Enable - BdThemes

To use the Elementor Navbar widget from Element Pack, first, you have to enable the widget.

  1. Go to WordPress dashboard > Element Pack Plugin dashboard.
  2. Then, Click the Core Widgets Tab.
  3. Search the Navbar Widget Name.
  4. Enable the Navbar Widget.
  5. Hit the Save Settings Button.

Insert Navbar Widget

Inserti Navbar widget - BdThemes

Open your page in Elementor editor, search by the Navbar widget name, then drag and drop it.

The default view of Navbar

the default view of the navbar - BdThemes

The Navbar displays a message to ” select a Navbar “.

Content Tab Customization

Navbar Section

Go to Content > Navbar

Navbar - BdThemes

Find the Select Menu, Alignment, Offset, Padding, Menu Height, Parent Indicator, and Auto Hiding Menu options.

Dropbar Section

Go to Content > Dropbar

Dropdown - BdThemes

Find the Dropbar Alignment, Item Alignment, Dropbar Padding, and Dropbar Width options.

Additional Section

Go to Content > Additional

Additional 3 - BdThemes

Find the Delay Show, Delay Hide, Dropdown Duration, and Dropdown Offset options.

Style Tab Customization

Navbar Section

Go to Style > Navbar

Navbar 1 - BdThemes

Find the Navbar Style, Normal > Color, Background Color, Column Gap, Row Gap, Border Type and Border Radius, Typography, and Parent Indicator Color options.

Navbar hover - BdThemes

Then find the Hover > Color, Background Color, Border Color and Border Radius, Typography, and Parent Indicator Color options.

Navbar active - BdThemes

Then also find the Color, Background, Border Type, Border Radius, Typography, and Parent Indicator Color options.

switcher button - BdThemes

The Induvisual Menu Style feature is a new feature of the Navbar widget. You will get the Induvisual Menu Style option under the Navbar section.

switcher button2 - BdThemes

To use the feature, just enable the Induvisual Menu Style switcher button and after enabling the swicher button, the Induvisual Menu item sub section will appear.

item1 - BdThemes

Come to the Induvisual Menu item section, you will get the below cuatomization options to customize the Induvisual Menu item.

1. Menu Items: Come to the Induvisual Menu item section, by default select the first menu item.

2. Add Item: You can add other menu items by click the “Add Item” button.

3. Copy Item: If you want then you can copy the same item and also customize it.

item2 - BdThemes

Inside the menu item, you will get two tab sections; Normal and Hover. In the normal tabs section, you will get the below options-

1. Color: This option lets you change the Menu item normal text color.

2. Background Color: This option lets you change the Menu item normal text background color.

3. Border Color: This option lets you change the Menu item normal border color.

item3 - BdThemes

In the Hover tabs section, you will get the below options-

1. Color: This option lets you change the Menu item hover text color.

2. Background Color: This option lets you change the Menu item hover text background color.

3. Border Color: This option lets you change the Menu item hover border color.

item4 - BdThemes

In the normal tabs section, you will also get the below options-

7. Selective Menu: The selective menu option gives you the opertunity to select the induvisual menu to customize it. Here we select the number 3 menu item.

8. Menu Number: This option lets you select the specific menu item. Here we set the number 3 that’s why the number 3 menu item is selected. If you want then you can select any number of your menu item to customize the specific menu item.

Dropdown Section

Go to Style > Dropdown

Dropdown 1 - BdThemes

Find the Dropdown Background, Normal > Color, Background, Gap, Padding, Border Type, Border Radius, Typography, and Parent Indicator options.

Dropdown hover - BdThemes

Then find the Hover > Color, Background Color, Border Radius, Typography, and Parent Indicator Color options.

Dropdown active 1 - BdThemes

Also find the Active > Color, Background, Border Type, Border Radius, Typography, and Parent Indicator Color options.

Video Assist

Thanks for Watching the Navbar Video Tutorial. Please visit the demo page for examples.

Thanks for being with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge