2

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?

http://mattaltepeter.com/new/about.shtml

Matt Altepeter
  • 317
  • 2
  • 5
  • 17

1 Answers1

9

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>
Shail
  • 3,639
  • 1
  • 18
  • 29
  • Ah thank you. This got it to mostly work. The only issue now is when the page is loaded, the last item on the menu is highlighted by default even though I manually assign `class="active"` on the first item. Any suggestions? – Matt Altepeter Mar 08 '13 at 13:54
  • The issue is in your script section the javascript you are using to add class active . – Shail Mar 09 '13 at 00:50
  • I deleted everything in the script tag except to initialize the scrollspy and it still sets the last nav item to active on page load. – Matt Altepeter Mar 09 '13 at 21:51
  • on my jsfiddle its working .. there is something which is raising the issue – Shail Mar 10 '13 at 01:38
  • Thanks for the edits. Removing the jQuery to initialize scroll spy worked perfectly. Thanks again. – Matt Altepeter Mar 10 '13 at 05:26
  • Thank you! Saved me some head banging not knowing why it wasn't working! – Sean Thompson Aug 13 '13 at 19:19