Bootstrap Scrollspy is not working
I am trying to implement a fixed side menu that updates the active page link with the active class. I placed the scroll spy HTML5 elements on the body, but I am having issues. Can someone check out my page and see if they can determine what's wrong?
Answer
The issue is that you have placed your nav inside a div and than using the nav id to the scroll. In order To make the scrollspy to work You can assign "side-nav" to the span3 div like : Jsfiddle demo in browser
<div class="row">
<div class="span3" id="side-nav">
<ul class="nav nav-list about-list hidden-phone hidden-tablet affix" >
<li class="active"><a href="#about"><i class="icon-chevron-right"></i> About Me</a></li>
<li><a href="#education"><i class="icon-chevron-right"></i> Education</a></li>
<li><a href="#work"><i class="icon-chevron-right"></i> Work Experience</a></li>
<li ><a href="#sports"><i class="icon-chevron-right"></i> Sports</a></li>
</ul>
</div>
You can create your para section in the following way :
<div class="page-header" id="about">
<h1 >About Me</h1>
<p>My name is Matt Altepeter. I am 21 years old .</p>
</div>
Please remove the script to initialize scrolling , since you have already added them to body
<body data-offset="50" data-target="#side-nav" data-spy="scroll">
Its good practice to declare bootstrap.js just after the jquery and before any other script . Put all your script in footer , helps save loading time .
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>