Active link border/underline over a bootstrap navbar class - css

Question

I have been trying to adapt the solution from the question Active link border/underline asked by me.
I tried to adopt the same solution in the bootstrap navbar but there are some other effects with that solution.
Like I changed the padding of nav.navbar to 15px 20px 0px, the actual problem was solved whereas the hover and the alignment of the icon moved slightly down from the center.
nav.navbar {
align-items: center;
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
* {
margin: 0;
padding: 0;
}
nav.navbar {
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
.header__option.active,
.header__option.active:hover {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
</div>
</nav>
The effect I wanted to have while hovering the icon.
Updated questions to reflect what I also want:

Answer 1

You can add a "fake" bottom border same color as the background of navbar to the icons.
Like so -
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-items: center;
padding: 0px 20px 0px; /* REMOVED TOP PADDING */
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
/* REMOVED BORDER */
/*border-bottom: 1px solid #f8f9fa;*/ /* the fake border */
/*border-bottom-width: 3px;*/ /* fake border width */
/* ADDED BOX SHADOW */
box-shadow: inset 0 -3px #f8f9fa;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
.header__option.active,
.header__option.active:hover {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</nav>
Update: Changed border-bottom in header_options property to box-shadow.
2nd Update: removed top padding from nav.navbar to vertically center icons.

Answer 2

You could use inner box-shadow.
.header__option.active,
.header__option:hover {
color: #1877f2;
box-shadow: inset 0 -3px #1877f2;
/* border-bottom: 1px solid #1877f2; */
border-bottom-width: 3px;
background-color: #f8f9fa;
}
nav.navbar {
align-items: center;
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-items: center;
padding: 15px 20px 0px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
.header__option.active,
.header__option:hover {
color: #1877f2;
box-shadow: inset 0 -3px #1877f2;
/* border-bottom: 1px solid #1877f2; */
border-bottom-width: 3px;
background-color: #f8f9fa;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
<div class="header__items">
<i class="fas fa-bell"></i>
</div>
</div>
</nav>