Create a fixed navbar

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Create a fixed navbar

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.

 

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form