Bootstrap 3.0 - Tiny Navbar

by venkateshwaran

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="wrapper">
<div class="navbar navbar-inverse ">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button> <a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#about">About</a>
                </li>
                <li><a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>
</div>

CSS

/* Navbar background */
body {
    height:1000px;
    width:100%;
    background-color:#F0F0F0;
}
.navbar {
    width:100%;
    height:100px;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
}
.navbar.navbar-inverse {
    background-color: white;
}

/* Navbar title */

.navbar-inverse .navbar-brand {
    color: lightgray;
}

/* Focus/hover state for title */

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: black;
}

/* Navbar links */

.navbar-inverse .navbar-nav > li > a {
    color: orange;
}

/* Navbar links hover/focus states */

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: pink;
}

.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}

/* Mobile toggle button border */

.navbar-inverse .navbar-toggle {
    border-color: lightgreen;
}

/*Mobile toggle button hover/focus*/

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: slategray;
}

/* Mobile icon bar colors */
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #CCC;
}

JavaScript

$(function(){
    $('.navbar').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('.navbar');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'40px'
            }, 600);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'100px'
            }, 600);
        }  
    }
});