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

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.

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.