Hey, I am Ajink, and today in this blog, we’re going to create a webpage with a sticky header using HTML and CSS. A sticky header provides easy navigation, staying fixed at the top while scrolling through content.
HTML Code: create index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sticky Header Webpage</title>
</head>
<body>
<header class="sticky-header">
<h1>Your Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- Your webpage content goes here -->
<section id="home">
<h2>Home Section</h2>
<p>Welcome to our website. Explore the content below!</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>Learn more about our company and mission.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<p>Discover the range of services we offer.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Reach out to us for inquiries or feedback.</p>
</section>
</main>
</body>
</html>
HTML Code Explanation:
- We have a basic HTML structure with a header containing the website name and navigation links.
- The
mainsection contains different sections of the webpage, each with a unique ID.
CSS Code: create a style.css
body {
margin: 0;
font-family: 'Arial', sans-serif;
}
.sticky-header {
background-color: #333;
color: #fff;
padding: 15px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.sticky-header h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s ease-in-out;
}
nav ul li a:hover {
color: #3498db;
}
main {
padding: 20px;
margin-top: 70px; /* Adjusted margin to avoid content being hidden behind the header */
}
section {
margin-bottom: 30px;
}
CSS Code Explanation:
- The CSS provides styling for the sticky header, navigation links, and webpage content.
- The
position: fixedproperty is used to make the header sticky at the top while scrolling.
Conclusion:
In this blog, we successfully created a webpage with a sticky header using HTML and CSS. A sticky header improves navigation and user experience on a webpage. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.
Thanks for reading, and if you have any doubts, feel free to comment!
