CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Xeon
Xeon

Reputation: 395

Is it possible to add an arrow to Bootstrap's active tab?

See this image I comp in Photoshop: enter image description here

Above is a nav bar done in Bootstrap, but I added the pointer for illustration purposes.

Is it possible to do this in Bootstrap? If it's too challenging, are there any nav bar plugins to do the job?

Secondly, when I hover my mouse over the nav links, how do I make the hover animation "glide" fluidly instead of just suddenly popping over to the hovered link?

Tks! I'm also open to any plugins etc.

Upvotes: 0

Views: 4840

Answers (1)

Mukul Kant
Mukul Kant

Reputation: 7122

Yes you can add an arrow to Bootstrap's active tab below is an example code, which will helps you. 

.navbar-default .navbar-nav {
  margin-top:40px /*---*/
}
  
.navbar-default .navbar-nav > li.active{
    position: relative;
  }
  .navbar-default .navbar-nav > li.active:after{
    border-bottom: 10px solid #e7e7e7;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: -10px;
    width: 0;

  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div id="bs-example-navbar-collapse-6" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>

Upvotes: 1

Related Questions