When looking at the official Angular page for navigation tabs, there is no bottom border displayed on the selected tab.
However, when I implement the same code, a border is showing even on the selected nav item.
Below is my HTML Code:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 3</a>
</li>
</ul>`
And here is my CSS:
.nav-item .active
{
background-color: rgb(119, 218, 218) !important;
border-bottom: 0px;
color:rgb(168, 19, 168);
}
Can anyone provide guidance on how to remove the bottom border from the active nav item?