In this tutorial I am going to show you that how you can hide your website navbar while scroll goes down. Its very simple and 2 line of code but very useful for your web UI, Basically its an extension Bootstrap Auto-Hiding Navbar which hides navebar on scroll down and show on scroll up.

How to integrate it in websites.

Include jQuery and Bootstrap:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

Include plugin’s code:

<script src="jquery.bootstrap-autohidingnavbar.min.js"></script>

 Call the plugin:

<script>
   $("div.navbar-fixed-top").autoHidingNavbar({
     // see next for specifications
   });
</script>

That’s all for today’s tutorial i hope this simple and very easy to integrate tutorial helps you in your UI designs.

Read also: How to create Accordion toggle using jQuery and Bootstrap

A live demo and free to download source also available check it before download if it worthy.

Please give us your feedback in comments and do share it with your friends.

Book: Bootstrap