Make a webpage with a sticky header that remains at thetop while scrolling.

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 main section 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: fixed property 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!

Ajink Gupta
Ajink Gupta
Articles: 38