I'm in the process of constructing a navigation menu using bootstrap 4, but I've encountered an issue that's proving to be quite challenging.
header > nav {
background-color: #fff;
}
.navbar {
padding-top: 1.6rem;
padding-bottom: 1.6rem;
}
.navbar-nav > li > a {
font-size: 1.4rem;
color: #504843;
text-transform: uppercase;
letter-spacing: .1rem;
font-weight: 700;
margin-right: 2rem;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
background: none;
font-size: 1.4rem;
color: #262423;
border-bottom: .3rem solid #ff5f06;
letter-spacing: .1rem;
}
.navbar-nav > li:last-child {
margin-right: -2rem;
}<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/images/logo.png" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<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 disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>I have successfully implemented an orange underlined effect (border-bottom) on hover for each menu item. However, when hovering over a menu item, the entire menu shifts upwards slightly.
Any suggestions on how to prevent this upward shift? Thank you