Responsive nav bar

Hi Waqar,

I'll try my best to explain the voodoo.

<button ... data-toggle="collapse"></button>

This, essentially, toggles an element being shown or hidden on it's data-target.

<button ... data-target="#navMenu"></button>

...

<div ... id="navMenu"></div>

The button will target the element with an id of navMenu. If you watch the element in the browser's developer tools, you'll see the div's class changing from collapse to collapsing to collapse in. The pairing of collapse with in forces the element to be displayed.

<div ... class="navbar-collapse"></div>

On it's own, it's just some styling rules - only when it gets paired with the class collapse does it become special.

<div ... class="navbar-collapse collapse"></div>

At screen widths 768px and larger, this element gets display: block !important making it visible until the screen reaches what Bootstrap defines as small. Here is a typical example similar to what can be found on Bootstrap's website.

<div class="navbar-collapse collapse" id="navMenu">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
    </ul>
</div>

The id is a value I chose and is targeted by the data-target attribute on the button that becomes visible when the screen is (max width: 767px). The button starts off hidden because of the class navbar-toggle. All together, here is a simple fixed top navigation bar.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMenu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>

        <div class="navbar-collapse collapse" id="navMenu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
            </ul>
        </div>
    </div>
</nav>

The documentation on Bootstraps website leaves a lot to be desired for understanding what is going on under the hood; it's only just enough to get you using the framework, but to really know 'what is collapse really doing?` you need to open up the source file and do a search for the class you want to know more about (in both the css and js files).

Good luck!