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
