All videos

Site build: Navigation

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Site build: Navigation

Let’s build a website navigation bar together. We’ll start with Webflow’s navbar element, edit the content, style the nav links, and create a call-to-action button with a combo class.

00:00 — Introduction 00:26 — Navbar 00:54 — Content 01:31 — Nav links 02:42 — Combo classes 05:57 — Recap 06:19 — CTA: Share your hero navbar progress using the #webflow101 on Twitter

<details>

<summary>

Video transcript

</summary>

This is part of the Freelancer's Journey site build series. It covers building the navigation for the Freelancer course site — designing and structuring the main navigation element of the project site.

Topics covered include setting up the Navbar element, adding nav links, configuring the mobile menu, and styling the navigation to match the site's design system. Navigation is one of the first structural elements to get right since it appears on every page.

</details>

Video details

Duration

6:31

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Site build: Navigation",
  "description": "Let’s build a website navigation bar together. We’ll start with Webflow’s navbar element, edit the content, style the nav links, and create a call-to-action button with a combo class.",
  "url": "https://university.webflow.com/videos/site-build-navigation",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b947d8c6ad9a3e6d08faca_maxresdefault.webp",
  "duration": "6:31",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=QjDQlD3jUQk",
  "embedUrl": "https://www.youtube.com/embed/QjDQlD3jUQk",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}