Scrollspy broken when using non-list-based navbar markup
Created by: secondstreetmedia
According to the documentation (http://v4-alpha.getbootstrap.com/components/navbar/), navbar implementation can be simplified from:
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
to:
<nav class="navbar navbar-light bg-faded">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</nav>
However, unless I'm missing something, which is entirely possible, doing so appears to break Scrollspy, as the menu items no longer highlight.
Using the initial navbar implementation: https://jsbin.com/dekakunuha/edit?html,css,js,output
Using the simplified implementation: https://jsbin.com/viyexurala/edit?html,css,js,output
Thanks, Tim