Navbar - For Navigation
Add, customize, and reuse a navbar.
Last updated
Add, customize, and reuse a navbar.
Last updated
A navigation bar or navbar is a link to appropriate sections/pages in a website that helps readers in traversing the online document.
From left sidebar click on +
This will open the then under Navigation -> Drag & Drop any Navbar element into the canvas
You can place the navbar anywhere in your site — there's no right or wrong way to do this. Since the navbar is self-contained, you can move it wherever and whenever you like.
Your navbar is a container that centers a group of elements on the page.
Brand: The brand placeholder is a link block located on the left of the navbar. Here you can add a logo or text or any other brand indication.
Nav menu: The nav menu is on the right of the navbar. It is a parent element that contains all the navigation (nav) links.
Nav links: These are text links with predefined padding and other styles. They’re usually linked to different pages or sections of your website.
Menu button: By default, the menu button is hidden on desktop view but will appear at the tablet breakpoint and below. It allows you to access the nav menu (and the nav links) when horizontal space is limited, like on a mobile device.
To link to different sections of the page:
Select any element in the Navbar
Click on the Settings icon ⚙️ from the left sidebar
This will open the properties panel
Choose the link type -> Scroll To, URL, Email or Phone
Scroll To is option to link page sections, URL is for external link
If you want to add more links to Navbar do the following
Click on any Nav Link.
This will highlight the select element with blue toolbar like shown in the image below
Then click on copy icon in the blue toolbar, this will duplicate the element.
That's it.
The navbar element has no preset values for width or height. You can adjust these values in the Style panel.
Navbar width
When you drop the navbar inside the body, section, or another element, it will take up the full width of that element. You can constrict the navbar horizontally by setting a width on itself or by constricting the width of its parent element (with auto margin set on the navbar to center it). You can also add margin to the navbar (combined with a max width or auto width) to change the relationship with the elements around the navbar.
Navbar height
The height of the navbar is determined by the content inside — either the height of the brand logo or the height of the nav links. You can adjust the height of the navbar by:
Adding a height value to the navbar
Adding top and bottom padding to the navbar itself
Adding top and bottom padding to the content inside the navbar
You can add padding to the nav links by selecting a nav link and adjusting the top and bottom padding. The size of the nav link and the navbar adjusts accordingly. You can also add margin to achieve a similar effect.
A more uniform approach might be to select the navbar and adjust its padding. Increasing the padding adds more height because it creates extra space between the navbar and the container that holds all the navbar elements.
Click on any element in the Navbar
From the left sidebar -> Click on 🎨 icon -> This will open the apperance panel -> Click on Inspect -> Click on Nav, to select the entire navbar element
Once we select the entire navbar using Inspect panel from the above steps
When switch to Appearance tab -> under Classes -> you can see list of the classes applied to that Navbar
You can even add custom class name & start changing background, its height or other properties.
Sometimes you want a Navbar to remain at the top forever even if you scroll. By default whenever you drag and drop any Navbar element it will be sticky, however if you have used header section navbar this is not the case.
To make the Navbar sticky do the following
Select the entire Navbar by following above steps
Click on the Appearance icon from the left sidebar 🎨
Then under Display -> postion -> fixed (This will make Navbar fixed to top)
Then under Dimensions -> Width -> Set to 100% (to occupy the entire width of the screen)
That's it
