Navigation bars, or navbars, are the direction signs that tell people where to go. Via this top bar, visitors can easily navigate to the most important pages on your website, like the features, contact, blog and about page. The logo also resides in the navigation bar.
Navbars can technically be placed anywhere, though most commonly they’re positioned as the first item—directly inside the body element.
Adding a navbar
To add a navigation bar, click on the top panel on the Pointer icon. Then add the Navigation element.
You’ll see that this element contains three groups with elements inside:
Mobile toggle: Open and close icon images
This container holds an image element for the logo and a text block for the company name. Via the Settings tab, you can upload an image for the logo. The text can be changed by double-clicking in the element.
By default, the logo isn’t clickable (it’s only the image). If you want to add a link, you can insert a Link block (open the Pointer icon in the top panel) directly above the image in the Layer sidebar. In the link block’s settings you can then add the URL.
This container has three text link items. You can edit the text by double-clicking each text element and typing your own title directly on the canvas. In the Settings tab, you can add the URL.
For the link you can choose from:
Pages: Link to another page on your website
Website: Add any other URL
You also have the option to open links in a new tab, though you’ll probably only use this option when linking to another website.
This container has two image items: The Open and Close icon. In the Settings tab, you can upload images for these icons—if you want to show your own icons.
You can style navbars as easily as other elements. In the Design tab on the right side, you can play around with background colors, padding, margin, fonts and more.
If you want to add more space between elements inside the bar (like text links), you can select these items separately and tweak the settings under Design.
To edit mobile elements, switch to the XS screens view under All screen sizes in the Design tab.
Then click on the Navigation element (top-level) in the Layer sidebar, and select Preview open in the Settings tab under Dropdown.
Once the mobile menu is opened, you can click on separate items and design them as you like.
These changes only apply to the mobile screen view. If you switch to any other screen view, you can make changes for those specific views.
Navigation bars have no set height or width, they adapt to whatever box they’re put in. If the container takes up 70% of the page's width, then so will the navbar.
As for height, it totally depends on how big your font and logo are. The bar also expands when you add more content inside.
When people visit your page on mobile, the navbar menu will automatically adapt to fit the screen. For the mobile view, a hamburger menu is used.
Note: This only works when you add the prebuilt navigation bar.
In a hamburger menu, the text links that are normally shown in the full-size menu will be hidden. Instead, a small Open icon is shown that you can click to unfold a pop-up, where the text menu items are shown vertically.
You can replace the open icon by uploading your own image. By default, you’ll see a hamburger button containing three horizontal stripes. Read more about hamburger menus.
To see what your navbar looks like in different screen sizes, click on All screen sizes in the Design tab. Here you can choose from XS screens to XL screens (the sizes are next to each option).
If you have a lot of menu items you’d like to incorporate in the navigation bar, a dropdown menu can be your answer.
To add a dropdown, click on the Nav menu element in the Layer sidebar.
You’ll now see that all your text link items are selected. Next, click the Pointer icon in the top panel and select Dropdown. This will add a dropdown menu in the navbar.
Double-click on the name Menu in your canvas to replace the text with your own menu title.
To edit the dropdown items, first open your menu in the Layer sidebar by selecting the Dropdown element and clicking Open preview in the Settings tab on the right.
In the Layer sidebar under Toggle, you can rename the label and upload an icon.
Under Menu, you’ll see different menu items. Right-click to copy and paste more menu items. In the Settings tab you can add the URLs for each menu link.