Navbar

In this lesson:

• Add a navbar
• Style a navbar
• Understand the menu button in a navbar
• Reuse a navbar on multiple pages
• Stick the navbar to the top of a page
• Add a dropdown to the navbar

Add a navbar

To add a navbar:

1. Open Add panel > Elements
2. Drag a Navbar from the Advanced section onto the Webflow 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. Learn more about the navbar menu button.

Configuring the brand logo

Let’s add a logo to our navbar. 

Head to the Assets panel in the left panel of the Designer where you can upload and manage assets. Click the “cloud” icon in the upper right corner and choose the file(s) you’d like to upload. You can drag your logo image into the Brand link.

Linking the brand logo to the homepage

It’s standard practice for a brand image or logo to link back to the homepage. To do this:

1. Select the Brand link
2. Open Element settings panel > Link settings
3. Choose Page from the link types
4. Open the Page dropdown and choose “Home”

You’ll also want to add a role and aria-label to the logo link to describe the link’s purpose to site visitors navigating your site using a screen reader or other assistive technology: 

1. Select the Brand link 
2. Open Element settings panel > Custom attributes
3. Click the “plus” button
4. Enter “role” in the Name field and “navigation” in the Value field
5. Click the “plus” button 
6. Enter “aria-label” in the Name field and a value describing the purpose of the brand link (e.g., “Back to homepage,” “Back to main,” etc.) in the Value field

Learn more about creating custom attributes.

Adding nav links

The second component of the navbar is the nav menu. This component holds our nav links. By default, the navbar comes with 3 nav link placeholders you can edit, delete, or add.

To add more nav links:

1. Select any element in the Navbar
2. Open Element settings panel > Navbar settings
3. Click Add link

Another way to add nav links is to copy and paste a nav link that already has a class applied to it. This is a great time saver if you plan on styling multiple nav links. To do this:

1. Delete all but one nav link
2. Open Style panel > Selector field and add a class to the nav link
3. Copy and paste the nav link as many times as you need
   

When you duplicate this nav link, the class is already applied to each new one you paste. You can double-click the nav link to edit the text inside.

Linking nav links

To link each nav link to a different source:

1. Select the nav link
2. Open Element settings panel > Link settings
3. Select a link type
   

Note: The File link type is only available on some paid Workspace or Site plans. 

Style a navbar

The navbar element is very flexible when it comes to styling.

In this section, we’ll focus on 3 areas that give us that control:

• Size of the navbar and nav menu
• Style the nav link
• Nav link states

Size of the navbar and nav menu

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.

Good to know: To simultaneously increase or decrease margin or padding on complementary sides of an element, use Option + Drag (on Mac) or Alt + Drag (on Windows). Learn more about margin and padding.

Nav menu height

You can also make similar changes to the nav dropdown menu which appears when clicking the nav menu on smaller breakpoints. You can access the nav dropdown menu by selecting the navbar in the tablet breakpoint and clicking Menu > Show in the Element settings panel.

Adjusting the height of nav links on touch device breakpoints is really helpful to make sure that the size of your tap targets is large enough for finger taps. Learn more about the navbar menu button.

Style the nav link

This is where classes help out a lot. Classes save styling information that you can apply to as many elements as you want throughout your site. The moment you begin styling an element, a class is automatically created and applied to the selected element. All styling adjustments made to this element are saved in this class. You can also create a class manually — before adding styles — by typing in a class name in the Selector field of the Style panel.

You can access the Selector field 1 of 3 ways:

• Click into the Selector field in the Style panel
• Hit Command + Return (on Mac) or Control + Enter (on Windows)
• Right-click the element and click Add class in the context menu

Now, we can apply the same class to each of the nav links so style changes to that class affect all the links in the navbar at once.

Nav link states

You can visually indicate interactions with nav links by changing how they look in different states, like the default and hover states. To access the States menu, select a nav link and open Style panel > Selector field, then click the dropdown menu (which will be available if there is already a class applied to the nav link). Learn more about states.

One of the simplest ways to indicate that the mouse is hovering over a nav link is a color change on hover. This can be a color change of the nav link background or a color change of the nav link text.

To add a background color to a nav link in the Hover state:

1. Open Style panel > Selector field
2. Add a class to the nav link, if there isn’t one already
3. Click the Selector field dropdown
4. Choose Hover
5. Open Style panel > Backgrounds and click the color swatch to add a background color

This background will be visible when a user hovers over the nav link.

Apply the same class to each of the nav links so changes to that class affect all the links in the navbar at once.

Understand the menu button in a navbar

The menu button is an element inside the navbar that organizes the nav links when there is limited horizontal space, like on a mobile device. It’s sometimes called a hamburger menu. The menu button and its functionality are built into the navbar element and can be accessed and configured in a number of ways.

By default, the nav menu button will appear on the tablet breakpoint and below. You can open preview mode and see the menu appear in your navbar when you switch to these devices. Clicking the menu button expands the nav menu. Clicking the menu button again collapses the nav menu.

On the desktop breakpoint, you can see the nav links are nested inside the nav menu element. This nav menu is the same element that displays nav links in a vertical list when the menu button is clicked on smaller breakpoints.

Trigger the menu in the Designer

You can open the nav menu in the Designer with the following steps:

1. Select the Navbar or any element inside it
2. Open Element settings panel > Navbar settings
3. Click Menu > Show

The Designer will automatically switch to the tablet breakpoint to open the nav menu.

Customize button visibility for different breakpoints

The navbar menu button initially appears in the tablet breakpoint, but you can change this to make the button visible on all or no breakpoints:

1. Select the Navbar or any element inside
2. Open Element settings panel > Navbar settings
3. Use the device options slider to choose where the menu button first appears

Reuse a navbar on multiple pages

It can be handy to turn a navbar into a component which you can then use throughout your site. Turning the navbar into a component lets you quickly reuse and edit all instances of your navbar.

To create your navbar component:

1. Select the Navbar on the canvas
2. Right-click the Navbar and choose Create component
3. Give the component a name and click “Create”

Once you’ve created a component, you’ll enter edit mode for the main component. All changes to the main component will update across all instances of that component. You can edit the main component by double-clicking any component instance. Learn more about components.

Reusing the navbar

Now that our navbar is a component, we can reuse that navbar anywhere on our site. 

First, open the Components panel, then click and drag the navbar component to any page in your site. Just like any other element, you can drop the component directly on the canvas or in the Navigator for more precision.

When you select an instance of a component, the component will be highlighted and outlined in green. You can open the Components panel to view how many times your navbar component has been used in your site.

Stick the navbar to the top of a page

First, we want to make sure the navbar is a direct child of the body element. Why? Because we want it to stay on top when scrolling. Sticky positioning will let the navbar stick to the top of the page while the remaining content scrolls away. And when you scroll back to the top of the page, the navbar will reposition itself at the top of the page.

To set the navbar to sticky:

1. Select the Navbar
2. Open Style panel > Position
3. Choose sticky from the position dropdown
4. Set a top value of 0 pixels to keep the navbar fixed to the top on scroll
5. Add a high z-index value (e.g., 2147483647, which is the highest z-index value detected by most browsers)

Important: Set a value on at least one side of the sticky element to make sure the sticky position works.

Understand position fixed vs. sticky

Position fixed removes the element from the document flow, so the navbar will float above the entire page. We don’t want this to happen when the navbar is still in its initial position because it will overlap elements. We only want the navbar to stay fixed and floating above other elements when we’re scrolling.

On the other hand, position sticky keeps the element in the document flow and only sets it to position fixed when the element’s initial position is scrolled away. So, the navbar stays exactly where you’ve placed it without overlapping adjacent elements. When you start to scroll past, it becomes fixed to the viewport.

Troubleshoot position sticky

Sometimes position sticky won’t work even though you’ve set the position to sticky and defined a distance value for one of the sides of the element. This can happen for many reasons:

• Position sticky may not work if overflow is set to hidden, scroll, or auto on any of the parents of the element
• Position sticky may not work correctly if any parent element has a set height
• Many browsers still don’t support sticky positioning — check out which browsers support position:sticky

Position sticky might not work if the position distance value is set on a side that isn’t affected by the scrolling. For example, if you set the distance on the left or right, and you’re scrolling through the page vertically, the element won't stick. 

It also won’t work if you’ve set a distance to the bottom, for instance, instead of the top and your element is aligned to the top of the parent — it’s either the first element in the parent or aligned to the top with flex or grid alignment settings.

Add a dropdown to the navbar

A dropdown menu is a pre-built navigation element that can be added to almost any area of a site. Usually you’ll find a dropdown element in the navbar of a website. 

In Add panel > Advanced, you can drag the dropdown element to the desired location in your site. 

Dropdown settings

The dropdown list isn’t visible until the dropdown is clicked. You can make it visible by going to the Element settings panel and clicking Menu > Show. Learn more about the dropdown element.

By default, the dropdown list appears when a user clicks the dropdown toggle, but you can make it appear when the user hovers over the dropdown toggle by enabling the Open menu on hover option. The close delay time (the time it takes for the dropdown list to close after hovering away) can be adjusted in milliseconds.

And that’s creating a navbar with a dropdown menu. Nice work!