All videos

Create a fixed navbar

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

Create a fixed navbar

New version: https://youtu.be/GPadt8wmGXM

---

The position property allows you to move elements relative to: their current place in the document (relative), a parent element (absolute), or the viewport (fixed). Here we’ll be covering fixed position.

Fixed-positioned elements are completely removed from the document flow — meaning they no long touch or push other elements around them. They're pinned to the viewport, so they stay in place as the user scrolls, unlike absolute elements which are pinned to one of their parent elements.

We’ll be covering these concepts in this lesson:

  1. Enabling fixed position
  2. Positioning values
  3. Z-index

And then bring it all together with an example.

Video details

Duration

1:27

Topic

Design & build

Continue watching

Create a fixed navbar - 图1<h3>Migrate a site to Webflow</h3>1:16:53

Create a fixed navbar - 图2<h3>Cursor follow interactions</h3>10:25

Create a fixed navbar - 图3<h3>Build a cursor-following 3D button</h3>5:15

Create a fixed navbar - 图4<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

Create a fixed navbar - 图5<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Create a fixed navbar",
  "description": "New version: https://youtu.be/GPadt8wmGXM",
  "url": "https://university.webflow.com/videos/create-a-fixed-navbar",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b943fe74625b1e40dfbaab_maxresdefault.webp",
  "duration": "1:27",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=MPakonnPQ-0",
  "embedUrl": "https://www.youtube.com/embed/MPakonnPQ-0",
  "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": ""
  }
}