Repository navigation
Scrollspy broken when using non-list-based navbar markup #19736
Description
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
Activity
cvrebert commentedon Apr 14, 2016
@secondstreetmedia Try JS Bin instead of JSFiddle.
secondstreetmedia commentedon Apr 14, 2016
@cvrebert Edited initial post, replacing JSFiddle links with JS Bin links.
cvrebert commentedon Apr 14, 2016
Reposting to trigger validator: https://jsbin.com/viyexurala/edit?html,css,js,output
[-]Scrollspy appears not to work when using simplified navbar implementation from documentation[/-][+]Scrollspy broken when using non-list-based navbar markup[/+]Manuellama commentedon Jun 4, 2016
I noticed this too in https://jsbin.com/dekakunuha/edit?html,css,js,output link:
If there is not enough content height in the page to make the target considered as active,when you choose the last item, this will not allow the content to reach the top of the page, and you will never get the white font to mark it as target, because it is not an active target. The last item will not be marked as active if there is no extra space to place the last item content in the top.
I added extra content after the last item so you can see it here.
https://jsbin.com/qapizoligo/edit?html,css,output
pvdlg commentedon Jan 21, 2017
X-ref #21807