CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapcaret
Tom
Tom

Reputation: 193

Remove bootstrap dropdown caret

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?

Upvotes: 3

Views: 15616

Answers (6)

elarcoiris
elarcoiris

Reputation: 1976

After trying a few solutions and trying to follow the right class references, a quick fix, but nest it if you can so it doesn't affect other global a tags:

a::after {
    content: none !important;
}

Upvotes: 0

LowCool
LowCool

Reputation: 1411

from git hub post now we can directly use noCaret prop. this post is basically from DropDownButton but it works for NAvButton as well

Upvotes: 0

Alex
Alex

Reputation: 652

Try doing this: 

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

works fine for me. :-)

Upvotes: 1

CJ.
CJ.

Reputation: 153

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;
}

Upvotes: 5

technoTarek
technoTarek

Reputation: 3218

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;
}

Upvotes: 2

sandeep
sandeep

Reputation: 92813

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

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

Upvotes: 13

Related Questions