Pure CSS Sticky Header

Pure CSS Sticky Header | HTML with Demo

by

A sticky header is a navigation bar or a menu bar which remains on top of our web page even when we scroll down. In simpler words, a sticky header remains fixed on top of the page. This allows users to access other routes easily without scrolling back to top.

Sticky headers cover a significant part of the screen that may be used for some other useful content. So, we need to use that space effectively. We ought to make sure that sticky headers take up the smallest possible space in the screen along with providing readable texts and tappable target sizes.

In this tutorial, we’ll develop and learn how to make a sticky header using HTML and CSS without JavaScript. We recommend you to try and code with us and see the scrolling effect of the header in real time. Now, let’s get to the coding and building part!

  1. Let’s first create an HTML file. (index.html)
  2. Next we’ll add a div or header tag in HTML.
  3. Add a class named “header” to the div tag.
File: Index.html

Our index.html file looks like this.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding is Easy</title>
</head>
 
<body>
    <div class="header">
        <h2>Coding is Easy</h2>
    </div>
</body>
 
</html>

Now let’s begin our CSS file which is very important to develop a sticky header. Create a file named index.css.

Inside the CSS file, we will add different properties to the header class which we created in the HTML file. The attribute which makes the header sticky is the position which will have the value as “fixed”.

File: index.css

The CSS code that we need to add is:

 body {
    margin: 0;
}
 
.header {
    color: white;
    position: fixed;
    height: 90px;
    width: 100%;
    background-color: black;
}

Now, Link the CSS file inside the HTML file. Add the given code inside the tag of your index.html file.

<link rel="stylesheet" href="index.css">

We have successfully created our sticky header. After adding contents in the page, the nav bar will remain stuck to the top even while scrolling the page.

Conclusion: Sticky headers are advantageous provided they truly serve a purpose for the users. Not all websites would need a sticky header. If a sticky header does provide value to users, then ensure that it is as small as reasonably possible. Ensure that it has high contrast against the background and does not distract your users.

Hope the article was useful to you and you enjoyed creating the cool sticky header.

Leave a Comment