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

How to integrate it in websites.

Include jQuery and Bootstrap:

Include plugin’s code:

 Call the plugin:

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:
  • chohan

    Good One!

    • Guest

      really nice 🙂

    • Guest

      really nice

      • Guest


        • Guest


        • Guest


  • Gowri Sankar


    • Guest


  • Guest