How to create a sticky header with CSS position
Learn to build a fixed-position header that stays at the top of the viewport while scrolling using CSS. This guide covers the necessary HTML structure and the exact CSS properties required to achieve a smooth, sticky navigation bar.
Learn to build a fixed-position header that stays at the top of the viewport while scrolling using CSS. This guide covers the necessary HTML structure and the exact CSS properties required to achieve a smooth, sticky navigation bar.
Prerequisites
- A modern web browser that supports CSS position: sticky (Chrome, Firefox, Safari, Edge).
- A text editor like VS Code, Sublime Text, or Notepad++.
- Basic knowledge of HTML and CSS.
- A local development environment or a live web server to test the page.
Step 1: Create the HTML structure
Create a new HTML file named index.html. Add a header element with a navigation bar inside it. Below the header, add enough content to allow scrolling and demonstrate the sticky effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="main-header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Scroll Down to Test</h1>
<p>This paragraph contains enough text to trigger the sticky behavior. Keep scrolling.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Repeat this paragraph multiple times to ensure the header stays fixed. Scroll down past the fold to see the effect.</p>
</main>
</body>
</html>Step 2: Apply basic styling to the header
Create a style.css file and link it to your HTML document. Style the header with a background color, padding, and text alignment. Ensure the header has a defined height so the browser can calculate the sticky offset correctly.
/* Reset basic margins for consistency */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding-top: 60px; /* Prevent content from hiding behind the fixed header */
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
position: sticky; /* The key property */
top: 0; /* Distance from the top of the viewport */
z-index: 1000; /* Ensure it stays above other content */
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}Step 3: Adjust for mobile responsiveness
Update the CSS to handle mobile devices. Use media queries to change the padding or layout on smaller screens. Ensure the sticky behavior does not cause layout issues on narrow viewports.
@media (max-width: 768px) {
header {
padding: 0.5rem;
}
nav ul {
flex-direction: column;
gap: 10px;
}
body {
padding-top: 40px; /* Adjust padding for smaller header */
}
}Verify the installation
Open index.html in a web browser. Scroll down the page slowly. You will see the header remain fixed at the top of the viewport while the content scrolls underneath it. The header should not disappear or jump when you reach the top of the page.
/* Expected behavior description */
1. Page loads. Header is visible at top.
2. Scroll down. Content moves up.
3. Header stays pinned to top edge of window.
4. Content continues scrolling below header.
5. Stop scrolling. Header remains visible.Troubleshooting
If the header does not stick, check the following common issues and their fixes.
- Error: Header disappears when scrolling to the top.
Ensure the
padding-topon thebodymatches the height of your header. If the body padding is smaller than the header height, the content behind the sticky header will be hidden incorrectly./* Fix */ body { padding-top: 60px; /* Must be >= header height */ } header { height: 60px; /* Define explicit height if needed */ } - Error: Header overlaps content on mobile.
On small screens, the header might overlap text. Increase the
padding-topon thebodyor reduce the header height./* Fix for mobile */ @media (max-width: 768px) { body { padding-top: 50px; /* Adjust to fit mobile header */ } } - Error: Header does not stick on Safari.
Some older versions of Safari have issues with
position: sticky. Ensure you are using a modern version of Safari. If not, add a fallback usingposition: fixedwith a JavaScript toggle, but this is rarely needed today./* Fallback for very old browsers */ @supports not (position: sticky) { header { position: fixed; top: 0; } } - Error: Header sticks but content is cut off.
Check the
z-indexvalue. If other elements have a higherz-index, they might cover the header. Increase thez-indexof the header.header { z-index: 1000; /* Ensure it is higher than other elements */ } - Error: Sticky behavior only works on desktop.
Verify that the viewport meta tag is present in the
<head>. Without it, mobile browsers may not render the sticky position correctly.<meta name="viewport" content="width=device-width, initial-scale=1.0">
If all checks pass and the issue persists, clear your browser cache and reload the page. Ensure no JavaScript is overriding the CSS position property dynamically. Inspect the element in the browser DevTools to confirm the computed style shows position: sticky and top: 0.