Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<header class="masthead">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <img src="http://lorempixel.com/489/105/">
                </a>
            </div>
            <div class="col-sm-6"></div>
        </div>
    </div>
</header>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#"><img src="http://lorempixel.com/186/40/" /></a>

        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav top-nav">
                <li><a href="#">Menu 1</a>

                </li>
                <li><a href="#">Menu 2</a>

                </li>
                <li><a href="#">Menu 3</a>

                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid" style="height: 2000px;">Scroll down the page, to make the logo image show() to the left of Menu 1.<br /><br />Scroll back up the page to make the logo image hide(), but Menu entries do not return to their former positions.<br /><br />If you click on a menu entry, they then jump to their expected positon.</div>

CSS

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    font: normal 14px arial, sans-serif;
    background-color: #eeeeee;
}
nav {
    margin: 0;
}
nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar-brand {
    position: relative;
    display: none;
    padding: 5px 15px;
}
.navbar-brand > img {
    height: 40px;
}

JavaScript

$(function () {
    $('nav').affix({
        offset: {
            top: $('header').height()
        }
    });
    $('nav').on('affix.bs.affix', function () {
        $('body').css('margin-top', $('nav').height());
    });
    $('nav').on('affix-top.bs.affix', function () {
        $('body').css('margin-top', 0);
    });
    $('.scroll-top').click(function () {
        $('body, html').animate({
            scrollTop: 0
        }, 1000);
    })
    $(window).scroll(function () {
        if ($(this).scrollTop() > $('header').height()) {
            $('.navbar-brand').show();
        } else {
            $('.navbar-brand').hide();
        }
    });
});