Articles on: Components & Elements

Navigation

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:






The Navigation element after it is added


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:






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:







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 ⬇️







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: 25/03/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!