Getting Started

You can add a Navigation bar to your website using the Navigation element. This article will cover how you can add and edit a navigation bar in your website, follow all the instructions accordingly.

How to add Navigation Element?

To integrate the Video Element into your site, follow these steps:

Create a section by clicking the + Add New Section Button.
Choose a suitable Containers.
In the central section, click on the plus button `⨁` labeled Add Element or Container.
Within the Elements section, choose Navigation from the options available.

Refer to the GIF & screenshot below to see this procedure visually:

Personalizing Your Video Element

Within the Video Element editor, you'll find these customizable features on the General Tab:

- Logo
- Links
- Buttons
- Dropdowns
- Links Style
- Button Style
- Dropdown Style
- Toggle
- Settings and Background

To modify these settings, access the Navigation Element Editor. Refer to the screenshot below: 👇🏼

Logo

In the navigation editor's logo section, you can:

- Update your logo
- Set the logo image alt text
- Define the clickable link
- Adjust its width

Check out the screenshot for a visual guide:

Links

In the links section, you have the flexibility to customize your navigation bar links:

- Change menu text
- Connect them to specific places
- Pick icons and adjust their size
- Add extra details using Data Attributes

Refer to the Image and GIF below for the visual demonstration:

Buttons

In the Button options, you have control over the current button in your navigation bar. Here's what you can do:

- Edit the text displayed on the button
- Link it to a specific destination
- Select icons near the button text and customize their color
- Modify text and background colors, border width and color
- Enhance functionality by adding Data Attributes to these buttons

Refer to the Image below for the visual demonstration:

Dropdowns

In the Dropdowns settings, you can expand your navigation bar menu:

- Add dropdowns to the existing links
- Include new dropdowns or remove existing ones
- Customize dropdowns by editing or linking them

Refer to the GIF below for the visual demonstration:




This is what a dropdown will look like ⬇️

Links Style

This option allows you to enhance the appearance of your navigation bar links:

- Transform the font of navigation menus
- Adjust menu alignment within the container
- Set gaps between links
- Customize link text and its icon settings
- Define the hover effect for navigation menus

Refer to the Image below for the visual demonstration:

Buttons Style

The buttons in your navigation bar can be stylized inside this option. You can add icons, change their colors, add borders, and more.

Refer to the Image and GIFs below for the visual demonstration:

Dropdown Style

This option helps you style Dropdowns within your navigation bar:

- Change the dropdown span's border shape
- Pick its background color
- Set its padding
- Adjust its shadow color
- Customize dropdown text and icons
- Define hover effects for the dropdown

Refer to the GIF below for the visual demonstration:

Toggle

If you want to modify the hamburger menu in your website's navbar, which appears on mobile or tablet devices, you can easily do it from here. This option allows you to customize the menu's style according to your preferences. Also, you can enable the hamburger button for tabs if required.

Refer to the screenshot below for the visual demonstration:

Settings and Background

You can do more with your navigation with this option. These are:

- Turn sticky navigation on/off
- Change the sticky navigation's background color

Refer to the screenshot below for the visual demonstration:

Common customization option of the Navigation element

These are two other customized options available in the Navigation element. Which are on the Style & Advanced mode.




Check the below documentations to learn more about it:

- Styles tab in Editor
-
Advanced tab in Editor

Related articles

Text / Paragraph

Regular Button

Updated on: 05/06/2024