How Do You Make Nav Bar Stay on Screen While Scrolling in Figma?

When designing a website or app in Figma, it is important to have a navigation bar that remains visible while the user scrolls. This helps to make sure the user knows where they are and where they can go on the page. Fortunately, there are several ways to make a navigation bar stay on screen while scrolling in Figma.

1. Use Fixed Positioning

The easiest way to keep a navigation bar in view while scrolling is to use fixed positioning for the element.

To do this, select the layer you want to use as your navigation bar and then click the “Position” tab in the Properties panel. From here, select “Fixed” from the dropdown menu. This will ensure that your navigation bar will remain in place no matter how much you scroll.

2. Use Scroll Anchors

If you need more control over when your navigation bar should be visible, then you can use scroll anchors instead of fixed positioning. Scroll anchors allow you to specify which elements are anchored at specific points on your canvas and when they should appear or disappear as you scroll up or down.

3. Create Responsive Components

If you need your navigation bar to be responsive across multiple devices, then you can create a responsive component that adjusts its position based on device size.

To do this, create a symbol of your navigation bar and then add constraints so that it automatically resizes and repositions itself depending on device size.


Making a navbar stay on screen while scrolling in Figma is an important part of creating an effective design for any website or app. Fortunately, there are several ways to do this including using fixed positioning, scroll anchors, and creating responsive components. With these tools it should be easy for designers to make sure their nav bars stay visible no matter how much their users scroll!