Create a fixed navbar

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

 

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top