CODEWITHSUNDEEP
cssdrop-down-menutwitter-bootstrap
Max
Max

Reputation: 708

What's the mystery of the Bootstrap dropdown menu triangle?

I'm trying to understand the difference between Twitter Bootstrap dropdown menus when they are included within a navbar and when they are not.

When they are included into a navbar, a little up triangle/arrow is showed upon the expanded menu. This triangle is not showed when no navbar is used :

http://twitter.github.com/bootstrap/javascript.html#dropdowns

I just spent two hours exploring the css/html, I still don't understand WHY...

Any idea ?

Upvotes: 15

Views: 19779

Answers (3)

user1467439
user1467439

Reputation: 389

Just add this to the CSS and you will be able to use dropdown menu arrow without placing the dropdown inside a nav bar

.dropdown-menu:before {
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 }

.dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  }

.dropdown-menu:before, .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}

.dropdown-menu::after, .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}

Upvotes: 4

Rajarshi
Rajarshi

Reputation: 381

The triangle can be generated by the following syntax:

    <b class="caret dropdown-toggle"></b>

Upvotes: 1

Devender
Devender

Reputation: 480

There are two styles applied to the dropdown menu when inside the nav element. They are as follows:

.navbar .nav > li > .dropdown-menu::before {
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 }
 .navbar .nav > li > .dropdown-menu::after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  }

They create two triangles on top of each other one light grey, the other dark grey. If you use chrome developer tools you can inspect these elements and turn off different styles to get a feel for what they are doing. These styles are not applied without the navbar

Upvotes: 25

Related Questions