Can someone please assist me with an issue I'm facing? The underline in my navbar is not working as expected. Here are my HTML and CSS files: https://jsfiddle.net/57fd6yf5/1/ I am trying to make the cursor activate underlining only under the menu items, not under the logo. I suspect there may be a problem in the CSS file.
HTML:
<nav class="navbar navbar-expand-md navbar-light bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O MNIE</a>
</li>
<li class="nav-logo">
<a href="#"><img id="logo-navbar" src="images/logo.png" width="60px" height="60px"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">KONTAKT</a>
</li>
</ul>
</div>
</nav>
CSS:
.nav-link{
font-size: 20px;
}
.nav-item{
padding: 15px 30px;
}
.nav-logo{
padding: 10px 10px
}
.navbar-collapse {
justify-content: center;
}
.navbar-light .navbar-nav .active::after{
position: absolute;
bottom: -10px;
left: 0;
right: 0;
width: 100%
content: " ";
color: #F4C127;
border-bottom: 5px solid #F4C127;
}
.navbar-nav > li {
float: left;
position: relative;
}