Navbar

Add, customize, and reuse a Navbar.

This video features an old UI. Updated version coming soon!

In this lesson:

  1. Add a Navbar
  2. Style a Navbar
  3. Understand the menu button in a Navbar
  4. Reuse a Navbar on multiple pages
  5. Stick the Navbar to the top of a page
  6. Add a dropdown to the Navbar

Add a Navbar

Navbar icon thumbnail

To add a Navbar, scroll to the Components section of the Add panel and drag a Navbar element into your project.

You can place the Navbar anywhere in your project — there's no right or wrong way to do this. Since the Navbar is self-contained, you can move where and whenever you like. For our example, we’ll place it at the top, directly inside our body element.

The eleven elements that are included in the Components section are background video, dropdown, embed, lightbox, navbar (highlighted), search, slider, tabs, map, facebook and twitter.

Our navbar holds a group of elements all placed neatly inside a container that keeps content centered on the page.

  • Brand: The brand placeholder is a Link Block located to the left of the navbar. Here you can add a logo or text or any other brand indication.
  • Nav menu: To the right is the nav menu. It 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 on your website.
  • Menu button: By default, the menu button is hidden on desktop view. It allows you to access the nav menu and nav links when horizontal space is limited, like on a mobile device. Learn more about the 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 Upload in the upper right corner and choose the file(s) you’d like to upload. We’ll drag our logo image into the Brand link.

The Assets panel displays nine images of plants life scenes.

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 block
  2. Go to Element settings (Shortcut: D)
  3. Under Link settings choose Page
  4. Select Home from the dropdown
Step one on the left, select the brand logo. Step two on the right, select Home from the dropdown menu under the Page settings in the Link Settings section.

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 a few nav link placeholders you can edit, delete, or add.

To add more Nav links:

  1. Select any element in the Navbar
  2. Go to the Element settings (Shortcut:D)
  3. Under Navbar settings, click Add link
The Add link button in the Navbar settings section is highlighted.

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. Give the nav link a class
  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. Now, you can double-click the nav link to edit the text inside.

The style panel displays a nav link selected with a class name Nav Link. It also displays how many are on this page, 1, and on other pages, 4.

Linking Nav links

To link each nav link to a different source:

  1. Select the Nav link
  2. Go to the Element settings (Shortcut: D)
  3. Under Link settings, select the link type
The link settings panel displays six link style buttons, a URL text input field, a check box for "Open in new tab" and a dropdown menu for Preload.

Style a navbar

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

In this section, we'll focus on 5 areas that give us that control:

  1. Size of the navbar
  2. Positioning of the navbar
  3. Nav link states
  4. Navbar and nav link backgrounds
  5. Nav link transitions

Size of the navbar

The Navbar element has no preset values for width or height.

Navbar width

When the navbar is dropped inside of 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 or by constricting the width of the parent element. .

Navbar height

The height of the navbar is determined by the content inside. Specifically that means the height of the brand logo, or the height of the nav links. You can adjust the height of the navbar in a number of ways:

  • 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.

Pro-tip: Hold Option/Alt key while dragging the padding button to increase the padding on the opposite side.

Nav menu height

You can also make similar changes to the nav menu which appears on devices that have the Mobile icon set to visible. You can open the nav menu to access it by selecting the navbar and clicking Open Menu under the Settings panel.

Adjusting the height of nav links on touch devices is really helpful to make sure that the size of your tap targets is large enough for finger taps. Learn more about the Nav Menu Button

Style the nav link

This is where classes help out a lot. Classes save styling information you can apply to as many elements as you want throughout your project. 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.

Step one on the left, click the plus icon inside the selector. Step two on the right, name the new class Nav Link.

You can access the selector either by:

  • Clicking into the selector field in the Style panel
  • Hitting CMD + Enter (on Mac) or CTRL + Enter (on Windows)
  • Right-clicking the element and clicking Add class in the context menu

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

You can also style nav nink backgrounds in their default and hover state. For the hover state, activate the hover state and set a background. This background will be visible when a user hovers over the nav link. 

Nav link states

One of the simplest ways to visually indicate that the mouse is hovering on a link is a color change on hover. Select the Hover state from the States menu and choose a different font color. Learn more on how to style the various states of a link including the Current auto-state.

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 appears on Tablet breakpoint and below. You can go to preview mode and see the menu appear in your navbar when you switch to these devices. Clicking that menu button will expand the nav menu. Clicking the 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 when the menu button is clicked — it displays the nav links in a vertical list.

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. Go to the Element settings and click Open menu
  3. The Designer will automatically switch to the Tablet breakpoint open the menu
The Open menu button is highlighted in the Navbar settings panel.

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. Go to the Element settings
  3. Use the device options slider to select where the menu button first appears
The device options slider is highlighted on the Navbar settings.

Reuse a navbar on multiple pages

Reusing your navbar on multiple pages can be handy when using a sticky navbar throughout your project. To make this easy, we’ll create a symbol of our navbar. 

To create our navbar symbol:

  1. Select the Navbar in the Navigator
  2. Right-click the label of the navbar and select Create symbol
  3. Give the symbol a name and click Create symbol

Once you've created a symbol, the main mode of the symbol will open. All changes in the main mode will cascade across all instances of that symbol. You can enter main mode by double-clicking. See Editing the main symbol.

Step one on the left, select the Create symbol from the container settings after right clicking. Step two on the right side, name new symbol Navbar.

Now we can reuse the same navbar element anywhere in our project.

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

When you select an instance of a symbol, you’ll see it highlighted and outlined in green. Click the Style panel to see how many instances of that symbol are in your project.

Step one on the left, select the Navbar symbol from the symbols panel. Step two on the right, view the highlighted area displaying the amount of instances the symbol is used.

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. The sticky position keeps the navbar in place until you scroll past it. But in this case, the navbar sticks 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.

Stick the navbar to the top of the page

Select the navbar and head to the Style panel. Set the position to sticky and set a top value of 0 to keep the navbar fixed to the top on scroll. And to make sure the navbar stays on top of all other content, add a high z-index value (e.g. 2147483647, which is the highest z-index value detected by most browsers).

Step one on the left, select the Position dropdown menu in the style panel position section. Step two on the right, select Sticky from the dropdown menu.
Must know: Set a value on at least one side of the sticky element to make sure the sticky position works.
The position section in the style panel displays a dropdown menu for the position, four input fields for numeric characters, a relative to selector, a z-index input field and a float and clear button.

Understand position sticky vs. fixed

Position fixed removes the element from the document flow, so the navbar will float on the entire page and overlap other elements. We don’t want this to happen when the navbar is still in its initial position. 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. That can happen for many reasons:

  • Position sticky will most probably 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.

Step one on the left, add 30 to the bottom margin in the position sticky setting. Step two on the right, under the layout section, set Justify to end.

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 project. Usually you’ll see a dropdown element in the navbar of a website. 

From the Add panel on the right, you can drag the dropdown element to the desired location in your project. 

The eleven elements that are included in the Components section are Background Video, Dropdown (highlighted), Embed, Lightbox, Navbar, Search, Slider, Tabs, Map, Facebook and Twitter.

Dropdown settings

The dropdown list isn't visible until the Dropdown is clicked. You can make it visible by going to the Settings tab and enabling the Open menu option.

By default, the dropdown list appears when a user clicks the dropdown toggle, but you can make it appear when the user hovers on 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!

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!