2 approaches to this. Compare them and pick what fits your setup.
Keep the website header visible while scrolling. This improves navigation and user experience, especially on long pages.
Usage
Apply the .site-header class to your header element.
<header class="site-header">
<!-- Header Content -->
</header>
.site-header {
position: sticky;
top: 0;
z-index: 999;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
Advanced customization
by Ankit Panchal
Keeps your site header fixed to the top of the screen as visitors scroll, so navigation stays within reach on long pages. Includes a
-webkit-fallback for older browsers and a variable-driven setup so you can tweak the height, colour, and shadow in one place. Add the.site-headerclass to your header element.
:root {
--header-bg: #fff;
--header-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
--header-z: 999;
}
.site-header {
position: -webkit-sticky; /* Safari fallback */
position: sticky;
top: 0;
z-index: var(--header-z);
background: var(--header-bg);
box-shadow: var(--header-shadow);
}
/* Optional: only show the shadow once the user starts scrolling */
.site-header.is-scrolled {
box-shadow: var(--header-shadow);
}
.site-header {
transition: box-shadow 0.2s ease;
}
