How to create sticky header using css and html

Need a sticky header in your website! Sure, here's an example of how you can create a sticky header for a website using CSS:

1. First start with creating header.

<!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="styles.css">
  <title>Sticky Header Example</title>
</head>
<body>
  <header class="sticky-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>
  <div class="content">
    <!-- Rest of the page content goes here -->
  </div>
  <script src="script.js"></script>
</body>
  </html>

2. Now we create CSS, as you can see in above code we use <link rel="stylesheet" href="styles.css">
In your styles.css file add below css.

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.sticky-header {
  position: sticky;
  top: 0;
  background-color: #333;
  padding: 10px 0;
  z-index: 1000;
}

.sticky-header nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.sticky-header nav li {
  margin: 0 15px;
}

.sticky-header nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s ease;
}

.sticky-header nav a:hover {
  color: #f39c12;
}

That's it.
Now you can open your html page in browser and see that header is sticky.

In this example, the header with the navigation links will stick to the top of the viewport as the user scrolls down the page, thanks to the position: sticky; CSS property. The JavaScript file is included for potential future enhancements to the header behavior, but for a basic sticky header, it's not required.
Take help from professional developer

Codding Guide and Tutorials

Search This Blog

How to create sticky header using css and html

Labels

Comments

Post a Comment