Bootstrap 3.0 Navigation

by Kyle Mitofsky

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">
<!-- Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"  id="SiteNavBar">
    <!-- Nav Bar Header -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <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="#">Brand</a>
    </div>
    
    <!-- Nav Bar Links -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Resume">Resume</a></li>
            <li><a href="#Projects">Projects</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </div>
</nav>

<!-- Sections -->
<section id="Home">Home</section>
<section id="About">About</section>
<section id="Resume">Resume</section>
<section id="Projects">Projects</section>
<section id="Contact">Contact Me</section>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/18948440/1366033'>Element is hidden under fixed position header</a><br/>                
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>

CSS

body {
    background: grey;
    padding-top: 70px;
}
section {
    background: tan;
    display: block;
    width: 400px;
    height: 200px;
    margin: 20px;
    padding-top: 60px;
    margin-top: -60px;
}

JavaScript

$('.nav a').on('click', function(){
    $(".navbar-toggle").click();
});