Bootstrap4 navigation link active top border Style

Question

Im trying to get Navigation Link styles like this

In the mobile View active link should be like this =>

For now Using border and border color i got this =>

Respective mobile view

Any solution for get the expected results?

The current code

<nav class="navbar navbar-expand-lg navbar-light ">
    <a class="navbar-brand" href="#">
      LOGO
    </a>
    <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 justify-content-end" 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" >Services</a>
        </li>
        <li class="nav-item" >
          <a  class="nav-link" >About</a>
        </li>

        <li class="nav-item" >
          <a  class="nav-link" >Contact</a>
        </li>




      </ul>
    </div>
  </nav>

sass for active link

.navbar-nav > .active a
  color: $nav-active-color !important


.navbar-nav > .active
  border-top: 3px solid $nav-active-color !important

Answer 1

This would be a good use for the :before or :after psuedo classes, but without having any of your code to go off of I can only offer this vague suggestion.

As well, worth seeing the accepted answer here on a thread about nesting pseudo classes just in case you run into one of the outlined issues.

From there, you could add some keyframes and smooth out the transition to make a pretty seamless hover animation.

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:before {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  top: -4px;
}

<div></div>