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

1. Search by the Navbar widget name.
2. The widget will appear, Check the Element Pack Pro logo on top right corner.
3. Select the widget then Drag and Drop it on the editor page.

The default view of Navbar

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

Content Tab Customization

Navbar Section

Go to Content > Navbar

1. Select Menu: Choose the Menu for the Navbar. All the customize menu are will appear here.
2. Alignment: Set the alignment of the Navbar adjust the position Left Center, Right.
3. Offset: Set the offset for the navbar.
4. Padding: Choose the padding for the inner space.
5. Menu Height: Set the height of the Menu.
6. Parent Indicator: Enable the toggle switcher to show the parent indicator for the sub menu.
7. Auto Heading Menu: Enable the switcher for the auto heading menu.

Dropbar Section

Go to Content > Dropbar

1. Dropdown Alignment: Set the alignment for the Dropdown items, Adjust the position Left, Center, Right.
2. Item Alignment: Set the alignment of the Item position to Left Center and Right.
3. Dropdown Padding: Set the padding the dropdown items.
4. Dropdown Width: Set the width for the Dropdown menu items.

Additional Section

Go to Content > Additional

1. Delay Show: Set the time for showing the delay.
2. Delay Hide: Set the time for the delay hide.
3. Dropdown Duration: Set the Dropdown duration.
4. Dropdown Offset: Set the duration for the offset dropdown.

Style Tab Customization

Navbar Section

Go to Style > Navbar

1. Navbar Style: Choose the preset style for the navbar.

Normal

2. Color: Choose the Color for the Navbar.
3. Background: Set the background color for the Nav items.
4. Columns Gap: Set the Columns Gap.
5. Row Gap: Set the Row Gap.
6. Border

• Border Type: Choose the border type for the navbar.
• Border Radius: Choose the border radius.

7. Typography: Set the typography of the nav items.
8. Parent Indicator Color: Choose the Parent Indicator Color.

Hover

1. Color: Choose the Color for the Hover item.
2. Background Color: Set the background Color.
3. Border Color: Choose the Border Color.
4. Border Radius: Make the border radius.
5. Typography: Choose the Typography for the navbar.
6. Parent Indicator Color: Set the Parent indicator color.

Active

1. Color: Choose the Color for the Active item.
2. Background: Set the background Color.
3. Border Color: Choose the Border Color.
4. Border Radius: Make the border radius.
5. Typography: Choose the Typography for the navbar.
6. Parent Indicator Color: Set the Parent indicator color.

Individual Menu Style

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

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

Individual Menu Item Section

Go to Style > Individual Menu Item

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

1. Menu Items: Come to the Individual 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.

Normal

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.

Hover

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

1. Dropdown Background: Set the dropdown background color.

Normal

2. Color: Set the color or the text color.
3. Background: Set the background color.
4. Gap: Set the gap between the items.
5. Padding: Set the inner space of the Dropdown menu.
6. Border Type: Choose the border type.
7. Border Radius: Make the border radius.
8. Typography: Set the typography for the Dropdown.
9. Parent Indicator Color: Set the color for the parent indicator.

Hover

1. Color: Set the color for the hover navbar.
2. Background Color: Set the background color.
3. Border Color: Choose the border type.
4. Border Radius: Make the border radius.
5. Typography: Set the typography for the Dropdown.
6. Parent Indicator Color: Set the color for the parent indicator.

Active

1. Color: Set the color for the Active navbar.
2. Background Color: Set the background color.
3. Border Color: Choose the border type.
4. Border Radius: Make the border radius.
5. Typography: Set the typography for the Dropdown.
6. Parent Indicator Color: Set the color for the parent indicator.

Video Assist

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

Thanks for being with us.