Fixed headers are everywhere now. Most modern websites keep the navigation bar visible while users scroll because it improves navigation and makes the site feel smoother to use.
But if you’ve tried creating one as a beginner, you’ve probably seen this problem:
The header covers the top part of the page content.
This happens because fixed elements behave differently from normal elements in CSS.
In this tutorial, you’ll learn how to create a fixed header without overlapping content using a clean and practical approach.
Why Fixed Headers Overlap Content
When you apply:
|
1 |
position: fixed; |
the element is removed from the normal page flow.
In simple words, the browser no longer reserves space for the header.
So your content starts from the very top of the page, and the fixed header sits on top of it.
That’s why text or images often disappear underneath the navigation bar.
Quick Solution: Basic Fixed Header Padding on Body
The simplest fix is adding padding to the top of your body or main container equal to the header’s height.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .header { position: fixed; top: 0; left: 0; width: 100%; background: #2c3e50; color: white; padding: 1rem; text-align: center; z-index: 1000; } /* The fix - padding equal to header height */ body { padding-top: 60px; /* Adjust to match header height */ } .content { max-width: 800px; margin: 0 auto; padding: 1rem; line-height: 1.6; } </style> </head> <body> <header class="header">Fixed Header</header> <main class="content"> <!-- Your page content here --> <p>This is page content</p> </main> </body> </html> |
The Important Part Most Beginners Miss
This line fixes the overlapping problem:
|
1 |
padding-top: 70px; |
The content section needs extra space because the fixed header is sitting above it.
A good rule is:
- content top spacing = header height
So if your header height is 70px, your content should usually start with:
|
1 |
padding-top: 70px; |
Why Developers Often Use This Layout
Fixed headers are useful because users can still access navigation while scrolling.
You’ll commonly see them in:
- Blogs
- Dashboards
- Ecommerce websites
- SaaS landing pages
- Documentation websites
Most modern frontend layouts use this pattern somewhere.
A Cleaner Approach Using CSS Variables
In real projects, developers usually avoid repeating values multiple times.
Instead of writing 70px everywhere, you can use a CSS variable.
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
:root { --header-height: 70px; } .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: #222; } .content { padding-top: var(--header-height); } |
Why This Approach is Better
Later, if you change the header height, you only update it once.
This makes the layout easier to maintain, especially in larger projects.
Fixed Header vs Sticky Header
A lot of beginners confuse these two.
Fixed Header
|
1 |
position: fixed; |
The header always stays visible.
Sticky Header
|
1 2 |
position: sticky; top: 0; |
The header behaves normally at first, then sticks while scrolling.
Which One Should You Use?
Use:
fixed? when navigation should always stay visiblesticky? when you want a smoother scrolling experience
For simple websites, sticky headers are often easier to manage.
Common Mistakes
1. Forgetting Content Spacing
This is the most common mistake.
Without:
|
1 |
padding-top |
your content will hide behind the header.
2. Using Different Heights
If the header height is:
|
1 |
height: 80px; |
but your content spacing is:
|
1 |
padding-top: 50px; |
the layout will still overlap.
Both values should match.
3. Using Fixed Heights Everywhere
Some beginners try this:
|
1 2 |
height: 100vh; overflow: hidden; |
too early in the layout.
This can create scrolling issues on smaller devices.
Responsive Fixed Header Example
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<header class="header"> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> </header> <main class="content"> <h1>Page Title</h1> <p> Lorem ipsum dolor sit amet... </p> </main> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
:root { --header-height: 70px; } body { margin: 0; font-family: Arial, sans-serif; } .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: #222; display: flex; align-items: center; padding: 0 20px; } nav { display: flex; gap: 20px; } nav a { color: white; text-decoration: none; } .content { padding-top: calc(var(--header-height) + 30px); padding-left: 20px; padding-right: 20px; } |
Final Thoughts
Creating a fixed header without overlapping content becomes much easier once you understand how fixed positioning actually works.
The key thing to remember is:
- fixed elements do not reserve layout space
- you must manually create spacing for the page content
For most projects, using:
- padding-top
- CSS variables
- responsive spacing
is the cleanest and easiest solution.
Once you build a few layouts with fixed headers, this becomes second nature.
Frequently Asked Questions
Q1. Why does my fixed header cover content?
Because fixed elements are removed from the normal document flow.
Q2. How do I stop content from going behind the header?
Add top spacing to the content area using:
1padding-topQ3. Is sticky better than fixed?
It depends on the layout.
Sticky headers usually feel smoother, while fixed headers keep navigation visible all the time.
Q4. Can I use
margin-topinstead ofpadding-top?Technically yes, but
margin-topcan collapse with parent margins.padding-topis more reliable.
- responsive spacing
- CSS variables