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

Enable the Navbar widget

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

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

The default view of Navbar

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

Content Tab Customization

Navbar Section

Go to Content > Navbar

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

Dropbar Section

Go to Content > Dropbar

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

Additional Section

Go to Content > Additional

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

Style Tab Customization

Navbar Section

Go to Style > Navbar

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

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

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

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.

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.

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.

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.

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.

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

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

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

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.