drop down menu - bootstrap3 - caret reverse on click in navbar-nav -


i'm using bootstrap 3, , found few lines of css, work great, making caret reverse (upside-down) on click.

.navbar-nav .open > > b.caret {   border-top: none;   border-bottom: 4px solid; } 

for reference, (pretty standard) dropdown:

<ul class="nav navbar-nav navbar-right">   <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">       title text <b class="caret"></b>     </a>     <ul class="dropdown-menu">       <li>some submenu text</li>       <li>some submenu text</li>     </ul>   </li> </ul> 

why happening? understand it. thank you!

bootstrap caret uses popular trick draw triangle in css.

you can see here

css code top , bottom arrows (triangles):

.arrow-up {   width: 0;    height: 0;    border-left: 5px solid transparent;   border-right: 5px solid transparent;   border-bottom: 5px solid black; } .arrow-down {   width: 0;    height: 0;    border-left: 5px solid transparent;   border-right: 5px solid transparent;   border-top: 5px solid black; } 

Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -