Creating a Fixed Header

Create a header that stays in position when the container is scrolled

Sometimes you want to have a header that stays at the top of the page.

There are a few ways to do this. The first method is to set the group to use the “sticky” positioning value and then layer it above the other content.

The second is to create the header and content in separate layers after (layered after) the body content.

Setting the header to use positioning option

Create your header and then place it inside of a group

In the Layers panel that looks like this:

Add a background rectangle to create a margin around the items in the group.

Position the header in the top left position of the artboard or the group it's in and make its width stretch across the artboard. You can set the width to 100% in the width field if you like.

Open the Elements Panel and in the Layout Section set the Layout Position list option to Sticky:

Finally, set the z-index to any number above zero.

Export and test in the browser.

You can also use the Make a Fixed Header Macro to apply the standard set of properties to a group.

Example Project

Last updated