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, with z-index: 1; and position: fixed;

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

Updated on: 28/03/2025