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.

Adding the Navigation element

Follow the steps below to add the Navigation element to your site.

- Click on Add Element in an empty row and section
- From the General Elements section, select Navigation

Refer to the GIF below:

Editing the Navigation element

Follow the steps and instructions below to add and edit a Navigation element on your site.

The Navigation element editor has the following options:

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

The Navigation element editor:

Logo

Inside the logo option in your navigation editor, you will be able to update your logo, and change it’s size.

Refer to the GIF below for the visual demonstration:

Links

Inside the links option, you can make changes to the existing links in your navigation bar, add more or delete them.

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

Buttons

Inside the Buttons option, you can make changes to the existing buttons in your navigation bar, add more or delete them.

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

Dropdowns

Inside the Dropdowns option, you can add dropdowns to the links in your navigation bar, add more or delete them.

Refer to the GIF below for the visual demonstration:




This is what a dropdown will look like ⬇️

Links Style

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

Refer to the Image and GIF 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

The Dropdowns in your navigation bar under a link can be stylized inside this option. You can change their colors, add shadows, and more.

Refer to the GIF below for the visual demonstration:

Toggle

If you want to customize the hamburger menu in your navbar, which appears on mobile or tab devices, you can do it from here.

Refer to the GIF below for the visual demonstration:

Settings and Background

This option is used to change additional settings like enabling/disabling sticky navigation and changing the background color of the sticky navigation.

Refer to the GIF below for the visual demonstration:




Navigation
To add Navigation on your site. Check the video given below.

Related articles

Custom CSS

Updated on: 08/08/2023