Pin Position/Sticky Nav

In order to get your navigation bar design to stick to the top of your page as a user scrolls, you’ll have to use the Pin Position features in Quest and/or the “Fix position while scrolling” checkbox in figma.

You can set them up in your design prior to import or use Quest to do so BUT you will need to make sure they are at the top of your layers and not nested below the top. If you do this in Figma it will automatically move the layers for you but if you do it in Quest it will not so you will need to adjust your design accordingly.

In Quest, you can set the position of elements and groups to be pinned from the Properties panel.

In Figma, you can set things to be pinned by using the “Fix position when scrolling” checkbox.

The difference between how it works in Quest and in Figma is that Quest has more options about how you’d like things to be pinned. There are 3 options:

1. Pinned to Top

2. Pinned to Bottom

3. Pinned to Position

Toggling the “Fix position when scrolling” checkbox in Figma will give you the “Pinned to Position” option in Quest.

“Pinned to Top” will automatically move whatever element or group you use it on to the top of the page when you preview or publish the page. Even if it is floating somewhere in the page, it will go to the top. If you choose “Pinned to Bottom”, it will do the reverse and be stuck to the bottom of the page regardless of your device size or how tall you have the browser set to. “Pinned to Position” option will simply honor wherever that element or group is on the Y position. If it is floating down about 50px, it will stay 50px from the top of the page at all times when you have this option set. Depending on how you have your design setup, say you have a sticky nav bar at the very top of the design, both “Pin to Top” and “Pinned to Position” will behave basically the same.

So again, just remember that all layers you want pinned should be at the top of the design in most cases so you’ll want to adjust that in your design file itself.