Question

I downloaded the bootstrap template from http://www.initializr.com/
My question is how do I keep the navbar fixed on top of the screen whenever I scroll down to the footer of my web page? To have a better idea of what I’m trying to achieve I made a screenshot.

example : On a mobile device perspective the NAVBAR is fixed

example : When I scroll down to the footer of the page I want the NAVBAR to stay fixed on top of the screen. As you can see the NAVBAR fails to stay fixed on top of the screen.

CODE:

<div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
                    <a class="brand" href="#"><img src="img/pldttranssmall.png"></a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#about">About</a>
                            </li>
                            <li>
                                <a href="#product">Product and Services</a>
                            </li>
                            <li>
                                <a href="#investor">Investor Relations</a>
                            </li>
                            <li>
                                <a href="#support">Get Support</a>
                            </li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <input class="span2" type="text" placeholder="Search">
                            <button type="submit" class="btn btn-default">
                                <i class="icon-search icon-black"></i>Go
                            </button>
                        </form>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

How do I achieve this?

Answer 1

Just wrap the navigation bar inside a div and add these css classes to it style it as class="navbar navbar-fixed-top"

Example: http://jsfiddle.net/codovations/Uy5tt/show/

P.S: remove show from the end of the url to see the html

Update: Basically this is what they apply to the div to make it fixed on the top.

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
}