CODEWITHSUNDEEP
htmlcssbootstrap-4
menaka
menaka

Reputation: 1068

Bootstrap4 navigation link active top border Style

Im trying to get Navigation Link styles like this

enter image description here

In the mobile View active link should be like this => enter image description here

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

enter image description here

Respective mobile view enter image description here

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

Upvotes: 0

Views: 347

Answers (1)

CodeSpent
CodeSpent

Reputation: 1904

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>

Upvotes: 1

Related Questions