Created by: tmorehouse
When spying on nested navs, if using the markup where .nav-link
is inside a .nav-item
,
the parent previous sibling was not being highlighted. This PR addresses that issue with two additional lines of code (not including tests):
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a></li>
<ul class="nav nav-pills flex-column">
<li class="nav-link"><a class="nav-link" href="#item-1">Item 1</a></li>
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a></li>
<li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a></li>
</ul>
<li class="nav-item"><a class="nav-link" href="#item-2">Item2</a></li>
<li class="nav-item"><a class="nav-link" href="#item-3">Item3</a></li>
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a></li>
<li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a></li>
</ul>
</ul>
</nav>
I discovered this issue when I was finishing porting over ScrollSpy into Boostrap-Vue (via PR https://github.com/bootstrap-vue/bootstrap-vue/pull/1068), and figured I would create a PR on v4-dev
to fix the official version as well.