Styling a Navbar

 

The Navbar element is very flexible when it comes to styling. In this article, we're going to focus on five areas that give us that control:

  • Size of the Navbar
  • Positioning of the Navbar
  • Nav Link States
  • Navbar and Nav Link Backgrounds
  • Nav Link Transitions

Size of the navbar

The Navbar 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 its top and bottom padding. The size of the Nav Link and hence the Navbar adjusts accordingly. You can also add margin to achieve a similar effect.

 

A more uniform approach might be to select the Navbar itself and adjust its padding. Increasing the padding adds more height because it creates extra space between the Navbar itself and the Container which contains 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

Positioning of the navbar

When you add a Navbar onto your page, it appears where you drop it. It takes up the full width because it’s display setting is set to Block by default.

We wouldn’t recommend changing the default Display Setting of a Navbar or any pre-built Webflow component to ensure they work as intended. To use flexbox with your Navbar, replace the container with a custom div block and drag all Navbar elements into that div block.

Fixed to the top

If you want the Navbar to stay at the top of the page when you scroll:

  1. Set the positioning to fixed
  2. Use the top preset to make sure the content takes up the full width of the viewport
 
If there are elements on the page that overlap the navbar you might need to increase the z-index value in the positioning settings.

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.

Styling backgrounds

You can override the background colors for the Navbar, the Nav Links, the Nav Menu, and Nav Menu Button.

Navbar background

By default, the Navbar has an light gray background color. You can change the background by setting a different background color or adding a gradient or a background image. If you want to add some transparency, simply choose a background color and lower the opacity.

  1. Select the navbar
  2. Go to the Style panel
  3. Under Background add a fill or gradient.
 

Nav link background

You can also style the background of Nav Links in their default state and Hover state. Just activate the hover state and set a background. This background will be visible when a user hovers over the Nav Link. Learn more about the Hover state and other states you can set on Nav Links.

Nav menu & menu button background

In the same way, you can style the background of the Nav Menu and the Menu button. Learn more about the Nav Menu and and the Nav Menu Button.

Transitions

To smooth out the transition of styles between states so they don’t appear abruptly, you can add Transitions. To add transitions to the Nav Links :

  1. Select a Nav Link. Make sure the None state is selected.
  2. Scroll to the Transitions & Transforms section
  3. Add a transition. Choose font color
  4. Add another transition. Choose background color.
  5. You can adjust or keep the Duration and Easing values as they are.

Once you're finished adding transitions, hover hover over the Nav Links and they will transition smoothly.

 

Learn how to show and hide a Navbar when scrolling into a section using Interactions.

Learn more about Navbar trigger interactions.