Menu jumps on hover - html

Question

I'm building a menu using bootstrap 4m but I ran into an issue I can't figure out.
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 added an orange line (border-bottom) on hover. When I hover over a menu item, the entire menu jumps up a little bit.
How can I avoid this jumping?
Thanks

Answer 1

You can see working example here:
jsfiddle.net/n5f2b4qk/
You have "Jumps" because of the border-bottom: .3rem solid #ff5f06;
There are 2 approaches to avoid it.
set border in :after element (as in example)
.navbar-nav > li > a {
font-size: 1.4rem;
color: #504843;
text-transform: uppercase;
letter-spacing: .1rem;
font-weight: 700;
margin-right: 2rem;
position: relative;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
background: none;
font-size: 1.4rem;
color: #262423;
letter-spacing: .1rem;
}
.navbar-nav > li > a:hover:after,
.navbar-nav > li > a:focus:after {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
height: .3rem;
background: #ff5f06;
}
Other option is to set transparent border for a element and change color with hover.