CODEWITHSUNDEEP
htmlcssbootstrap-4navbar
Pablo
Pablo

Reputation: 21

bootstrap4 navbar underline

please help... Underline in my navbar doesn't work. This is my HTML and css file: https://jsfiddle.net/57fd6yf5/1/ I wanted the cursor to active underline under menu, but not under logo. I guessing that the problem is in 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;
}

Upvotes: 1

Views: 5158

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14964

For the border-bottom to be under the active link item, you would need the following css rule: 

.navbar-light .navbar-nav .active>.nav-link {
    border-bottom: 5px solid #F4C127;
}

However, if you want the border to be at the bottom of the entire navbar, then (as @ZimSystem pointed out) you need to add the missing ; to the width: 100% part in your css rule.

Upvotes: 1

Athul Nath
Athul Nath

Reputation: 2606

You should replace this css. Your class should be .navbar-light .navbar-nav li.active 

.navbar-light .navbar-nav li.active::after{
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  width: 100%;
  content: " ";
  color: #F4C127;
  border-bottom: 5px solid #F4C127;
}

Upvotes: 0

Related Questions