Articles on: Elements

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 and hamburger button for the mobile version.


  1. Adding the navbar element
  2. Navbar settings
  3. Hide / Show mobile menu
  4. Navbar animation
  5. Collapse navbar
  6. Adding new elements
  7. 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.


Adding the navbar element to the canvas


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.


Navbar settings section in the Right panel


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.


Hide/show navbar for easy editing


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.


Changing the slide animation on the navbar


Collapse navbar


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


Changing the collapse point for the mobile menu


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.


Adding elements to the navbar


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.


Previewing the navbar

Updated on: 28/03/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!