In this article, I have explained how you can create sticky navigation bar on scroll using HTML and CSS only.

Let's create the HTML with navigation bar, and some content inside main page

<div class="sticky-header">
  <ul class="navigation">
   <li><a href="javascript:void(0)">Home</a></li>
   <li><a href="javascript:void(0)">Contact</a></li>
  </ul>
</div>
<div class="main-content">
 <p>
  This is main content
 </p>
 <p>
  try to scroll the page
 </p>
</div>

In the above HTML code, we have simply added a navigation bar using <ul> and <li> tags, and assigned the class "sticky-header" to the main div

Now, we will the main CSS code, which will make our navigation sticky on top

.sticky-header {
 background-color: #000;
 color: #fff;
 width:100%;
 position: fixed; /*CSS property which makes nav sticky on top*/
 top: 0;
 left: 0;
 margin: 0;
 padding: 10px;
 text-align:left;
 letter-spacing: 3px;
}

above css code, is the class which makes navigation sticky using "position :fixed" property, using this property we make sure, the content will remain positioned as fixed during scroll in HTML page.

"top:0; left:0" gives the position from top of browser, where content should be placed.

Complete CSS

.navigation{
  margin:0;
  padding:0
}
.navigation li{
  padding:0;
  list-style-type:none;
  display:inline-block
}
.navigation li a{
  color:white;
}
.sticky-header {
background-color: #000;
color: #fff;
width:100%;
position: fixed;  /*CSS property which makes nav sticky on top*/
top: 0;
left: 0;
margin: 0;
padding: 10px;
text-align:left;
letter-spacing: 3px;
}
.main-content{
height:1000px;
padding:100px 0px 0px 50px;
}
.main-content p{
height:30px;
}

When used above HTML/CSS code, you will see output as below

sticky-navigation-bar-using-css-min.gif

Here is the fiddle demo

That's it, we are done.

You may also like to read:

Social media icons hover effect (CSS Based)

Useful CSS animation examples with code & animation basics