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
Hide / Show mobile menu
Adding new elements
Previewing the navbar
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.
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.
Use the Hide or Show buttons in the Navbar Settings section to make your mobile menu visible or invisible when editing the navigation bar.
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.
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.
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