How to change the bootstrap caret pointing direction on click event
21,839
Solution 1
you can add this
.nav .dropdown.open .caret{
border-top: none;
border-bottom: 4px solid #000000;
}
Solution 2
Just add this CSS:
.navbar-default .navbar-nav>li>a:focus .caret{
transform:rotate(-90deg);
transition:all 0.3s ease-in-out; /*for smoothness*/
}
Solution 3
Added the following CSS
.navbar .nav li.dropdown.open>.dropdown-toggle .caret {
border-top-color: transparent;
border-bottom: 4px solid #000000;
position: relative;
top: -3px;
}
Solution 4
In css..
When .caret
is a Class of arrows in a li
or span
.
.nav-list .caret {
transform:rotate(-90deg);
transition:all 0.3s ease-in-out;
}
.nav-list .active .caret {
transform:rotate(0deg);
transition:all 0.4s ease-in-out;
}
100% Fun!.
Credits to Tariq Javed.
Author by
chalo
Updated on February 13, 2020Comments
-
chalo over 4 years
I'm using 2.3.2 bootstrap
As I can change the position of the caret icon when I click the menu button.
I need that when I click the icon caret pointing up and when you click on another item the caret back to the initial state.
How is this possible?
The nav code
<div id="navi"> <div class="container"> <nav> <div class="navbar"> <div class="navbar-inner"> <div class="row"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="span2"> <a class="brand" href="#"></a> </div> <div class="span10"> <div class="nav-collapse collapse"> <div class="row"> <div class="span8"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lorem 3 opes<b class="caret"></b></i></a> <ul class="dropdown-menu"> <li><a href="#">Lorem</a></li> <li><a href="institucional.html">Olosmpa</a></li> <li><a href="#">Lorem 2 isum</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lorem mas<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Lorem</a></li> <li><a href="institucional.html">Olosmpa</a></li> <li><a href="#">Lorem 2 isum</a></li> </ul> </li> </ul> </div><!-- /span8 --> <div class="span2"> <div> <form id="buscar-fixed" class="navbar-form form-search"> <div class="input-append"> <input class="inputBusqueda span2" type="text" placeholder="Buscar..." /> <button class="btn" type="button"><i class="icon-search icon-white"></i></button> </div> </form> </div> </div><!-- /span2 --> </div><!-- /row --> </div><!--/.nav-collapse --> </div><!-- /span10 --> </div><!-- /row --> </div><!-- /nav-inner --> </div><!-- /navbar --> </nav> </div><!-- /container --> </div><!-- fin #nav-sup -->
-
chalo almost 10 yearsThanks, works great... is a simple solution.. the others works to.. But this is the simplest and clean.