EN IT
Home About Learn Blog

Build a Webflow Navbar: Desktop Structure & Hover

Intermediate 51:52 webflownavbarflexboxclampaccessibility

Rebuild Webflow's own desktop navbar from scratch — a solid Flexbox structure, an accessible nav, fluid spacing with clamp(), and a hover underline that never shifts the layout.

Watch on YouTube

Key takeaways

  • Build the foundation before the flashy parts: a clean desktop structure and layout come first, then responsiveness, then the mega menu and animations.
  • For accessibility, every navigation link belongs inside the nav menu (the semantic <nav>), and the primary link group reads best as an unordered list.
  • Put padding on the dropdown toggle, not the dropdown — the toggle is the actual clickable element, so padding elsewhere shrinks the real hit area.
  • clamp() makes both type and spacing fluid; the preferred value comes from a simple proportion (if 90rem = 100vw, then 1rem ≈ 1.11vw).
  • Animate a hover underline with an inset box-shadow, never a real border — a border changes the element's height and shoves the whole navbar around.

Video chapters

  1. 00:00 Intro
  2. 02:43 Adding all the elements to the page
  3. 14:03 Styling the elements with Flexbox
  4. 20:26 Accessibility + layout debugging
  5. 29:29 Styling the CTA button and spacing
  6. 34:09 Introducing the CSS clamp() function
  7. 41:47 Final alignment fixes
  8. 42:30 Applying hover interactions
  9. 50:52 Outro

By the end of this lesson you’ll have rebuilt the desktop version of Webflow’s own navbar from a blank canvas — structure, layout, fluid spacing, and hover effects included. It’s the foundation of a full series that goes on to make it responsive, add a real mega menu, and animate the dropdowns.

We do this the right way: no mega menu and nothing responsive yet, just a rock-solid desktop structure. Get that right and everything after it — mobile, dropdowns, animations — snaps into place instead of fighting you. Along the way we cover proper accessibility, fluid sizing with clamp(), and a hover underline that doesn’t wreck your layout.

The reference is Webflow’s actual homepage navbar, so we inspect it as we go and mirror its structure and details.

How it works

The skeleton is familiar: a navbar element wrapping a main-container (max-width plus horizontal padding as a layout boundary) wrapping a navbar_content-wrapper set to display: flex with justify-content: space-between. That splits the bar into a left group (brand + primary links) and a right group (secondary links + CTA).

The most important decision is accessibility. Webflow’s nav menu carries the semantic nav tag, so every navigation link — including the right-side group and the CTA — belongs inside it, not scattered across sibling wrappers. Going one step further, the primary link group is really a list, so it reads best as an unordered list (list-style: none, items set to inline-block). This is the kind of structure screen-reader users rely on.

A subtle gotcha: padding goes on the dropdown toggle, not the dropdown. The toggle is the element that actually opens the menu, so if you pad the wrapper instead, the visible link looks big but only a narrow strip is clickable. Reset the dropdown’s padding to zero and pad the toggle.

For sizing, we go fully fluid with clamp(). Rather than fixed values, font sizes and gaps scale with the viewport between a min and a max. The preferred value comes from a proportion: our container maxes out at 90rem, so if 90rem corresponds to 100vw, then 1rem ≈ 1.11vw. Apply the same idea to the container padding and every gap and the navbar shrinks gracefully across the whole desktop range without wrapping.

Finally, hover effects that respect the layout. A real bottom border changes an element’s height and shoves the navbar around, so the underline is a transparent inset box-shadow (Y: -2px, blur: 0) whose color animates in on hover. And to mirror Webflow’s touch where the whole menu dims except the link you’re on, each link’s color is set to inherit: the nav menu’s hover state fades everything to gray, while each link’s own hover state keeps it dark.

How to use it

  1. Structure it. Add a navbar → navbar class (white background, a subtle 1px bottom border). Inside, a navbar_main-container (auto side margins, max-width: 90rem, horizontal padding). Inside that, a navbar_content-wrapper set to display: flex, space-between.
  2. Add the content. Brand link with the logo (paste the SVG into a Code Embed), a nav menu with three dropdowns (Platform, Solutions, Resources) and two links (Enterprise, Pricing), plus a right group of two links and a CTA button.
  3. Make it accessible. Move every link inside the nav menu. Convert the primary group to an unordered list with navbar_link-list-items; strip default list padding/margins and bullets; set items to inline-block.
  4. Fix the dropdown hit area. Duplicate the dropdown class, reset its padding to zero, and move the vertical padding (1.5rem) onto the toggle instead. Set the toggle to display: flex, center-aligned, with a small gap for the icon.
  5. Lay it out. display: flex on the link groups and nav menu; use gap for spacing and grow if possible on the nav menu so it fills the space after the brand. Center everything vertically.
  6. Style the CTA. Blue background, border-radius: 4px, padding, medium weight, and the layered box-shadows copied from Webflow’s button.
  7. Go fluid with clamp(). Replace fixed font sizes and gaps with clamp(min, preferredVW, max) using the 90rem = 100vw proportion, so nothing wraps as the viewport narrows.
  8. Add hover polish. On the CTA, transition background + box-shadow and darken on hover. On links and toggles, add a transparent inset box-shadow underline that turns blue on hover; set link colors to inherit so the menu fades to gray while the hovered item stays dark. Transition color too, so it animates.

That’s the desktop navbar — structured, accessible, fluid, and interactive. Next episode: making it fully responsive for mobile.

Resources

Frequently asked questions

Why should all the navbar links live inside the nav menu in Webflow?
Webflow's nav menu carries the semantic nav tag, which tells assistive tech that everything inside is site navigation. Keeping both the left and right link groups inside it — the primary group as an unordered list — makes the navbar genuinely accessible, not just visually correct.
Why is my dropdown toggle only clickable in a small area?
The padding is probably on the dropdown wrapper instead of the toggle. The toggle is the element that actually opens the menu, so reset the dropdown's padding to zero and put the padding on the toggle — then its clickable area matches the visible link.
How do I add a hover underline to navbar links without shifting the layout?
Don't use a real border — it increases the element's height and pushes the navbar around. Instead add a transparent inset box-shadow at the bottom (Y: -2px, blur: 0) and reveal its color on hover, with a box-shadow transition for smoothness.
How do I make one navbar link stay dark while the others fade on hover?
Set each link's color to inherit so it follows the nav menu's color, give the nav menu a hover color of gray, then give the individual links and toggles their own hover color of dark. Hovering the menu fades everything except the item you're actually on.

← Back to the course