Fixed Headers Are Common
Having a fixed header is very common. You’ve seen it on other websites you’ve visited. The header stays at the top of the page as you scroll down so that you have easy access to the navigation items. You’ve also probably seen variations of this where the header disappears as you scroll down and then reappears when you start scrolling up.
Fortunately, it’s pretty easy. Let me show you how to have a fixed header with Just a few lines of CSS.
Full Fixed Header Example Code
Here’s an example of a full webpage that has a fixed header. This is a very basic, example driven webpage. However, this allows you to clearly see what’s going on.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Scottsweb.dev - Fixed Header</title>
<style>
.site-header {
background-color: #fff;
border-bottom: solid 1px #000;
padding-top: 3rem;
padding-bottom: 3rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.site-header ul {
display: flex;
list-style-type: none;
column-gap: 3rem;
justify-content: center;
}
#top {
padding-top: 200px;
}
</style>
</head>
<body>
<header class="site-header">
<nav>
<ul>
<li>my</li>
<li>nav</li>
<li>here</li>
</ul>
</nav>
</header>
<p id="top">Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p>
<p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p>
</body>
</html>Add CSS to the header element
The header element doesn’t have to be an actual header element. Whatever element you’re using as a container for your header is where we want to apply the CSS.
Here, the magic is happening by applying position: fixed; top: 0; left: 0; width: 100%;
We’re telling this element to be fixed to the viewport at x position 0 and y position 0 (the top left corner of the viewport). It’s important to have a width of 100% otherwise your element would only take up the width of it’s internal content.
Then, we give padding/margin top to the element below the header so that the header is not overlapping it.
Position Fixed Is Not Working
There are a lot of times where position fixed is not working. That may be why you’ve found this article. Elements higher up in the document tree (parent elements, grandparent elements, great grandparent elements, etc, etc) may be conflicting with position: fixed.
When using position fixed, ancestor elements cannot have certain css properties. The following may cause position fixed not to work.
- Ancestors with transform or will-transform properties
- Ancestors with 3d rendering animations
- Ancestors with visibility hidden
- If the nearest relatively postitioned element isn’t html or body (otherwise the header will be fixed relative to that element)
So, if position: fixed is not working for you, please look up the document tree in your dev tools inspector and find the culprit!