How to make a header stay on screen when scrolling

In TeleportHQ, you make a header stay at the top of the screen from the Position section of the right panel. Select the header, choose Sticky (or Fixed), set the top offset to 0, and give it a Z-index higher than the rest of the page, for example 100. Check the result in Preview: the editor canvas shows the whole page at full height, so the header doesn't stick while you scroll inside the editor.

Before you start#

Choose between Sticky and Fixed:

• Sticky (recommended): the header keeps its place in the page and sticks to the top once visitors scroll past it. The content below it is not covered.
• Fixed: the header is pinned to the top of the browser window from the start. The page content moves up underneath it, so you need to add space at the top of the content.

Steps#

1. On the canvas or in the layers tree, click your header or navigation bar. If it's a component, click the component on the page.
2. In the right panel → Visual tab, find the Position section. It comes right after Size.
3. In the dropdown in the section's title row, choose Sticky. It shows Auto by default.
4. In the row of six alignment buttons, click the top button (the fourth one). This sets the top offset to 0px. You can also type 0px in the top box.
5. In Z-index, type 100, or any number higher than the other elements on the page.

If you chose Fixed#

Do these extra steps after the steps above:

1. In the Position section, choose Fixed instead of Sticky.
2. Set the left offset to 0px too, or open the Size section and set Width to 100%, so the header spans the whole page.
3. Select the first section below the header.
4. In the Padding section, add top padding equal to the header's height, for example 80px, so the header doesn't cover it.

Check that it worked#

1. In the bottom toolbar, click Preview.
2. Scroll down the page in the preview.

The header stays at the top of the window. The editor canvas doesn't show this while you scroll, so always check in Preview or on your published site. See How to preview your site before publishing.

Troubleshooting#

My Sticky header doesn't stick Sticky only works while the header's parent is taller than the header. If the header sits alone inside a wrapper of the same height, the wrapper scrolls away and takes the header with it. Apply Sticky to the outermost element that sits directly on the page, for example the navigation component on the page, not an element inside it.

The header's margins disappeared Switching from Auto to Sticky or Fixed sets the header's margins aside. Switch back to Auto to get them back, or use padding instead.

Page content scrolls over the header The header's Z-index is too low. Type a higher number, for example 1000.

The top of my page is hidden under the header This happens with Fixed. Add top padding to the first section, or use Sticky instead.

Good to know#

• Position settings apply to the screen size you are editing and all smaller ones. To make the header sticky on desktop only, set it on the largest screen size, then switch to mobile and set Position back to Auto.
• If the header's position comes from a CSS class, the Position dropdown shows it in grey as sticky or fixed, and the offsets and Z-index show their values in grey too.
• Learn what each position option does in How to position elements.