My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. While I could manually set the z-index, I'm concerned it may conflict with Bootstrap components like modals.
https://i.sstatic.net/mZyCU.png
<div class="dropdown sticky-top">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="container sticky-top" style="top: 4em">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<div class="col-9">
<div class="container border m-5">
test
</div>
<div class="container border m-5">
test
</div>
<!-- more containers... -->
</div>
</div>https://jsfiddle.net/zwfcds9t/31/
(I had to re-run the fiddle to ensure the dropdown menu functions correctly)