Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH
I've tried to replicate the same concept on my Bootstrap HTML nav menu, but I've noticed that mine behaves slightly differently. Only the bottom border seems to move inward, and when hovering over the links, the menu item also shifts upward. I'm unsure of what needs to be added or changed to make it function the same way.
.navbar-light .navbar-nav .nav-link {
text-transform: uppercase;
text-align: center;
font-size: 13px;
text-decoration: none;
background: white;
color: black;
font-family: "open-sans";
transition: 0.3s ease;
border-top: 4px solid #FFFFFF;
border-bottom: 4px solid #FFFFFF;
padding: 20px 0;
margin: 0 20px;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
padding: 6px 0px;
background: #11ADE8;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-light ">
<div class="container-fluid">
<a class="navbar-brand " href="#">
<img src="images/logoblue.png" alt="">
</a>
<button class="navbar-toggler first-button darken-3" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Booking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</nav>Any assistance you can provide in achieving the same hover effect on my navigation menu would be greatly appreciated.