Menu
I have been working a Twitter Bootstrap Scrollspy plugin, but for the life of me I can not get it to work. Here is the HTML for the content area
<div data-spy="scroll" >
<section id="page_home" class="page_home" style="width:100%;background-color:rgb(245,245,245);">
<div class="container">
Home
</div>
</section>
<section id="page_projects" class="page_projects" style="width:100%;background-color:rgb(25,25,25);">
<div class="container">
Projects
</div>
</section>
<section id="page_services" class="page_services" style="width:100%;background-color:rgb(245,245,245);">
<div class="container">
Services
</div>
</section>
<section id="page_downloads" class="page_downloads" style="width:100%;background-color:rgb(25,25,25);">
<div class="container">
Downloads
</div>
</section>
<section id="page_about" class="page_about" style="width:100%;background-color:rgb(245,245,245);">
<div class="container">
About
</div>
</section>
<section id="page_contact" class="page_contact" style="width:100%;background-color:rgb(25,25,25);">
<div class="container">
Contact
</div>
</section>
</div>
and here is the HTML code for the nav bar
<div id="navbar" class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#page_home">Home</a></li>
<li><a href="#page_projects">Projects</a></li>
<li><a href="#page_services">Services</a></li>
<li><a href="#page_downloads">Downloads</a></li>
<li><a href="#page_about">About</a></li>
<li><a href="#page_contact">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
I have looked at some of the other post, but for the life of me I can't figure out why it is only selected the last item in the navigation bar.
Could anyone help me figure out why scrollspy is only selecting the last item and how to correct it?
473
Adding the HTML doctype declaration to the top of the page fixed it for me:
<!DOCTYPE html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
