How to make a fixed header when scrolling?

Here is the easiest way to make your header stick to the top of the page when scrolling the page.

The header component needs to be turned into a top-level container, using position: fixed; and z-index.

• Select the navbar or header you want to make sticky
• Go to Right panel -> Position -> Choose Fixed instead of Auto
• Go to Right panel -> Position -> Set a z-index higher than the rest of the elements on the page (ex: if you have elements with z-index 99, give the navbar z-index 100)

In this way it will remain sticky at the top when you are scrolling.

Updated on: 11/08/2025