Remove bootstrap dropdown caret

Question

I'm working on my personal portfolio with bootstrap and the navigation dropdown has a caret as you can see at http://portfolio.tomvervoort.net.

The caret next to portfolio is ok but when you click on portfolio the dropdown also has a white caret on top. Does anyone knows how to remove this one?

Solution 1

Your caret is inside .dropdown-menu:after. So, write like this:

.navbar .dropdown-menu:after{
 display:none;
}

Solution 2

Had the same problem in Rails (with twitter bootstrap rails gem), and the fix was slightly different.

.navbar .nav > li > .dropdown-menu::after, 
.navbar .nav > li > .dropdown-menu::before {
  display:none;
}

Solution 3

In the current version of TBS (v2.2.1), you also need to target the :before pseudo-selector like so:

.navbar .dropdown-menu:after, .navbar .dropdown-menu:before {
    display:none;
}

Solution 4

Try doing this:

.navbar .nav > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu:after {
    display:none;
}

works fine for me. :-)

View more solutions