May 5, 2014 11:13 am

Auto-Hiding Navbar using Bootstrap extension

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.

Auto-Hiding Navbar using Bootstrap extension

[wpdm_file id=101]DEMO

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

 

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

9 responses to “Auto-Hiding Navbar using Bootstrap extension”

  1. chohan says:

    Good One!

  2. Gowri Sankar says:

    Nice

  3. Guest says:

    fbhdfh

Leave a Reply

Your email address will not be published. Required fields are marked *