Add a border-bottom to a Bootstrap Navbar link - html

Question

I have a bootstrap 4 navbar that I'd like to add a hover affect to each link. I've added the following css to overwrite the standard styles which gives 'kinda' what I'm after. When hovering over a link the border-bottom shows but also pushes the text up when hovering. It is also not on the bottom of the navbar itself.
As I'm using the img to set the height of the row the navbar sits in and then splitting the height by 50% I wonder if that is what I am up against?
As you can see from the image, i'd like the orange border be at the bottom of the navbar. As a unintended concequence of what I've done so far when hovering over any link the whole text moves up by 5px or so then drops when not hovering.
This is the code making the navbar...
<div class="container-fluid p-0">
<div class="row no-gutters shadow">
<div class="col-sm-12 col-md-12 col-lg-1">
<img src="<?php echo URLROOT.'/public/img/msplogo.jpg'; ?>" class="header-logo mx-auto d-block"/>
</div>
<div class="col-sm-12 col-md-12 col-lg-11">
<div class="row no-gutters h-50">
<div class="d-none d-lg-block col-12">
<nav class="navbar navbar-expand-lg navbar-dark bg-msp-darkblue h-100">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
And this is the CSS...
/* Header Logo */
.header-logo {
width:100%;
max-width: 160px;
}
/* Small devices (landscape phones, less than 768px) */
#media (max-width: 768px) {
.header-logo {
width:100%;
max-width: 80px;
margin:10px;
}
}
/* Large viewport navbar */
.nav-link {
font-family: 'Open Sans', sans-serif;
font-size: 0.8vw;
font-weight: bolder;
text-transform: uppercase;
}
.nav-link:hover {
border-bottom: 5px solid #ff7240;
color:#fff!important;
}
Could anyone point me in the right direction?
Regards
Matt

Answer 1

To prevent the navbar from growing when you hover over the link, specify a transparent border-bottom of the same size as the :hover border.
.nav-link {
border-bottom: 5px solid transparent;
}
.nav-link:hover {
border-bottom: 5px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar" style="border: 1px solid gray">
<ul class="navbar-nav">
<li>
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</nav>

Answer 2

After a bit of digging I found I needed to add h-100 to the ul. This then made the link fill it's parent element and then in the css use height:100% on the .nav-link
Completed code is:
<div class="container-fluid p-0">
<div class="row no-gutters shadow">
<div class="col-sm-12 col-md-12 col-lg-1">
<img src="<?php echo URLROOT.'/public/img/msplogo.jpg'; ?>" class="header-logo mx-auto d-block"/>
</div>
<div class="col-sm-12 col-md-12 col-lg-11">
<div class="row no-gutters h-50">
<div class="d-none d-lg-block col-12">
<nav class="navbar navbar-expand-lg navbar-dark bg-msp-darkblue h-100 py-0">
<ul class="navbar-nav h-100 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
And the CSS - I had to add a padding-top to the link to move it back the middle as well.
/* Header Logo */
.header-logo {
width:100%;
max-width: 160px;
}
/* Small devices (landscape phones, less than 768px) */
#media (max-width: 768px) {
.header-logo {
width:100%;
max-width: 80px;
margin:10px;
}
}
/* Large viewport navbar */
.nav-link {
font-family: 'Open Sans', sans-serif;
font-size: 0.8vw;
font-weight: bolder;
text-transform: uppercase;
border-bottom: 5px solid transparent;
height:100%
padding-top:27px;
}
.nav-link:hover {
border-bottom: 5px solid #ff7240;
color:#fff!important;
}