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!

Related Articles

Responses

Your email address will not be published. Required fields are marked *