Fixed positioning

Use the fixed position to keep elements pinned to the viewport while you scroll.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

Usually, you may want to use the fixed position with a navbar. When you want the navbar to stay fixed in position on your screen while you scroll through the page.

To add the fix positioning to a navbar:

  1. Add a navbar to your project
  2. Select the main navbar element
  3. Under the Layout section of the Styles panel, set the Position to Fixed
  4. Choose the Top preset position
  5. Select the body
  6. Add top padding so that the navbar doesn’t overlap content

You can of course choose any preset, or manually adjust the position of the navbar or any element you want to position this way.

Since, any fixed element is removed from the document flow, it will appear above auto-positioned elements. It may cover some part of your content. In that case, you may want to use some padding/margins on the content that the fixed element is covering.

 
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback