Establish a fixed navigation bar

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

Typically, you might opt to utilize the fixed placement with a navigation bar. When you desire the navigation bar to remain fixed in place on your screen as you scroll through the page.

To incorporate the fixed positioning to a navigation bar:

  1. Integrate a navigation bar into your project
  2. Choose the primary navigation bar element
  3. Within the Layout category of the Styles panel, adjust the Position to Fixed
  4. Select the predefined position as Top
  5. Pick the body
  6. Include top padding to prevent the navigation bar from overlapping content

You have the freedom to select any predefined setting, or manually modify the placement of the navigation bar or any element you wish to position in this manner.

Because any fixed element is taken out of the document flow, it will appear above auto-positioned elements. It might obstruct a portion of your content. In that scenario, you might consider utilizing some padding/margins on the content that the fixed element is concealing.

 
Ewan Mak
Latest posts by Ewan Mak (see all)