I'm trying to make my first bootstrap site. What stumps me is why the static navbar doesn't scroll with the page. Here's the code. I'll include the entire header just in case the jumbotron underneath is doing something I don't see.
<header>
<nav class="navbar navbar-default navbar-static-top" id="site-nav" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" id="site-brand" href="#">Josef Roy Advincula</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#about-me" class="jlinks"><span class="glyphicon glyphicon-user"></span>About Me</a></li>
<li><a href="#" class="jlinks"><span class="glyphicon glyphicon-paperclip"></span>Portfolio</a></li>
<li><a href="#" class="jlinks"><span class="glyphicon glyphicon-phone"></span>Contact Me</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<div class="container">
<img src="img/profile_pic.jpg" class="img-responsive img-circle" alt="Josef Roy Advincula"/>
<hgroup>
<h1 class="text-center jumbo-header">Hi! I'm Josef</h1>
<h2 class="text-center jumbo-header">{ Web Developer/Programmer }</h2>
</hgroup>
</div>
</div>
</header>
