How To Make Fixed Top Sticky Navigation Bar [SourceCode]

On scrolling top sticky navigation bar like facebook with pure css code best view for webkit supported browsers.
you can also customize it, and transform it into responsive horizontal menu style for mobile devices because its based on
pure css and simple clean code.

Sticky Navigation HTML

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">About</a></li>
  <li><a href="#contact">Downloads</a></li>
</ul>

<center><h1>Download Source Code Free</h1>
<strong>Sticky Navigation is Best For -webkit- supported Browsers</strong> </center><br><br><br>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
<br>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

Above HTML code is for visuals and use this below Pure CSS code to prettify your navigation

Top Fixed Navigation like Facebook

CSS

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #222;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #fff;
    color: #3399ff;
}

.active {
    background-color: #3399ff;
}
</style>

Make a simple HTML file to see outputs. I hope you guys like this, Please Leave a comment for more Ideas to make content for you. Share in your communities Help Me to Grow.Thanks

Share on FacebookPlus on Google+

SUBSCRIBE TO OUR NEWSLETTER