Create a fixed navbar

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

layout-design
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

 

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?