Is there a way to make the bottom border of a bootstrap nav item align perfectly with the bottom border of the navbar? My goal is to use the bottom border as an indicator for the selected element. I managed to achieve this with the default height of the navbar, but once I increase the height to80px, the alignment gets thrown off.
https://i.sstatic.net/XajrE.png
Here is the HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
...
</div>
</nav>
And here is the CSS:
<style>
.navbar {
height: 80px;
display: flex;
align-items: center;
}
...
</style>
Any help would be greatly appreciated! Thank you!