How to create a responsive navbar

To create a responsive mobile menu you can use the Navbar interactive element.

Here are the steps required to create a responsive navbar menu for your project that will have a working sliding effect for the mobile version.

Adding the navbar element
Navbar settings
Hide / Show mobile menu
Navbar animation
Collapse navbar
Adding new elements
Previewing the navbar

Adding the navbar element

Go to the Elements tab, scroll down to the Interactive section and drag & drop the Navbar element to the top of your project.

This will add a premade navbar that you can easily style and customize for both Desktop and Mobile versions.



Navbar settings

Once you add the navbar you will notice in the Right panel the Navbar Settings section. Here you will find options to help you customize it such as: animation, collapse options, preview and more.



Hide / show mobile menu

Use the Hide or Show buttons in the Navbar Settings section to make your mobile menu visible or invisible when editing the navigation bar.



Navbar animation

Change the direction of the slide effect for the mobile menu from the Animation dropdown menu. You can choose between: none, left, right and top.

Use the Preview option while editing to see how the slide effect looks with the different options.



Collapse navbar

Choose the point where you want the mobile version of the menu to replace the desktop version. You can do this by choosing from the media queries that you have active at the time.



Adding new elements

To add a new element to your navbar, from the Navbar Settings section click on the Add menu item button. This will add a new simple menu item to both the desktop and mobile version.

Additionally, from the Elements tab you can drag and drop a normal Text element or a Dropdown element to the navbar if you want to create a more interactive navbar.

Adding elements with drag and drop will not add the element to both mobile and desktop versions. Additionally, deleting elements from one version will not delete them from the other.



Previewing the navbar

To preview the navbar in real time you have two options:

Go to the Right panel and in the Navbar settings click on the Preview button.

Or when selecting the navbar, in the context menu above click on the green Eye icon.

Updated on: 24 / 11 / 2022