EN IT
Home About Learn Blog

Webflow Navbar & Footer: Sticky Nav, Grid + Flexbox

Beginner 21:20 webflownavbarfootergridpositioning

Set up a sticky Webflow navbar with smooth anchor links, then build a footer from a default layout where grid and Flexbox work together to shape a two-dimensional layout.

Watch on YouTube

Key takeaways

  • Sticky positioning needs two things, not one: set position to sticky AND give it a top offset, or it simply won't stick.
  • Anchor links use the 'page section' link type, but the target list stays empty until you give each section an ID to point at.
  • Webflow's default layouts are an underrated shortcut — drag in a pre-built footer and reshape it instead of building every element by hand.
  • The 'current' state styles a nav link automatically when its section is in view; you can restyle or remove it, but it's free navigation feedback.
  • Grid and Flexbox aren't rivals — nest them: a grid for the two-dimensional footer, Flexbox for the one-directional groups of links inside it.

Video chapters

  1. 00:00 Intro + the Navbar & Mega Menu course
  2. 01:14 Analyzing the navbar's structure
  3. 04:46 Tweaking the navbar's layout (sticky position)
  4. 07:18 Setting up and styling anchor links
  5. 10:28 The footer + Webflow default layouts
  6. 12:35 Styling the footer
  7. 14:07 Tweaking the footer's layout (Flexbox + grid)
  8. 20:13 Outro + What’s Next

By the end of this lesson you’ll have a sticky navbar with smooth anchor navigation and a footer built from a Webflow default layout — the section where grid and Flexbox finally team up. We won’t build the navbar from scratch (there’s a whole dedicated course for that, mega menu included), but we’ll dissect its structure and fix the concepts people most often get wrong.

The navbar is a great place to clear up a few misunderstandings: why sticky positioning “doesn’t work” until you add an offset, how anchor links actually find their targets, and where Webflow quietly applies styles you didn’t ask for. The footer, meanwhile, is where you’ll see grid and Flexbox as partners rather than alternatives.

There’s also a quiet theme here: knowing when not to reinvent something. A default layout gets you 80% of a footer in one click, and your job is just to reshape the last 20%.

How it works

The Webflow navbar is a native element with a built-in structure — a container, a brand link, a nav menu with links, and a hidden menu button that appears on smaller breakpoints. To match the reference, you cap its max-width, center it with auto side margins, and make it stick. Sticky is where beginners stumble: setting position: sticky alone does nothing. You also need a top offset (a small value keeps a gap from the viewport edge). Once both are set, the navbar sticks and its backdrop blur kicks in over the content scrolling underneath.

Anchor links work through IDs. Change a nav link’s type from “custom URL” to page section, and you’ll find the dropdown of sections is empty — because none of your sections have IDs yet. Give each target section an ID (features, team, faq), and now the links resolve and scroll smoothly to them. As a bonus, Webflow applies a current state to the link whose section is in view; you can restyle it (a brighter color) or remove it, but it’s free navigation feedback.

The footer shows off composition. Rather than building from zero, you drag in a default “dark footer” layout and reshape it. The real lesson is the layout itself: the footer content is a grid (two rows, two columns), and inside it sit Flexbox groups — columns of links, a brand block, legal links. Grid handles the two-dimensional arrangement; Flexbox handles each one-directional group. Nesting them is how you build fairly complex layouts without losing control — and small touches like justify-content on auto-width columns tighten everything up.

How to use it

  1. Inspect the navbar. Add the native navbar element. Note its structure: navbar → container → a content wrapper (set to display: flex, space-between, centered) holding the brand link, the nav menu with nav-links, a button, and the menu button.
  2. Make it sticky. Select the navbar, set a max-width (900px) with auto side margins, position: sticky, and a top offset (12px). Scroll to confirm it sticks and the backdrop blur activates.
  3. Wire anchor links. Give the features, team, and FAQ sections IDs in their settings. Then set each nav link’s type to page section and pick the matching section. Test in preview.
  4. Style the current state. Select a nav link, choose the current state in the style selector, and set a distinct color (a bright purple) so the active section is obvious.
  5. Drop in a footer. Open the Add panel → Layouts tab → starter library, and click a dark footer. Set its background, fix the link hover color (override the dark default with white for accessibility), and delete the parts you don’t need.
  6. Add the missing pieces. Wrap the brand in a div with a tagline paragraph (flex column, 1em gap), and add a legal-links wrapper (flex, 2em gap) with “Terms and Conditions” and “Privacy Policy”.
  7. Compose grid + Flexbox. Set the footer wrapper to display: grid. Inside, the footer content is its own grid of auto-width columns (each a Flexbox group of links); tune the gaps and set justify-content: end to remove the extra space. Move the copyright and legal links into the grid and align them.

The next lesson is the last of the course: we take everything we’ve built and make it fully responsive — and pick up even more Flexbox and grid along the way.

Resources

Frequently asked questions

How do I make a navbar sticky in Webflow?
Select the navbar, set its position to sticky, and then set a top offset (for example 0 or a small value). Sticky on its own does nothing — the offset tells the element where to stick as you scroll.
How do I make navbar links smoothly scroll to a section?
Give each target section an ID in its settings, then set the nav link's type to 'page section' and choose that section. Without an ID the section list stays empty, so assign the IDs first.
Can I use a pre-built footer in Webflow?
Yes. Open the Add panel, switch to the Layouts tab, and drag in one of the default sections — like a dark footer. It comes with classes and structure you can restyle and simplify to match your design.
Can grid and Flexbox be used together in Webflow?
Absolutely, and they often should be. Use a grid for the overall two-dimensional layout and Flexbox for the one-directional groups nested inside it — for example a footer grid holding Flexbox columns of links.

← Back to the course