bootstrap remove upward arrow in dropdown

Question

I am using Twitter bootstap and wish to remove the upward arrow on the dropdown-menu whis is in my nav. I cannot find a reference in the bootstrap.css.

.navbar .dropdown-menu:after {
 content: '';
 display: inline-block;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #000; /* change color here, modified for a black arrow */
 position: absolute;
 top: -6px;
 left: 10px;
}

Answer 1

I would not recommend you to edit the bootstrap.css file. You can overwrite the styling in your custom stylesheet to hide the arrow for that component like this:

.dropdown-menu:after {
    border: none !important;
    content: "" !important;
}

With this method you can even do the overwriting for a specific dropdown only. For example, if your dropdown was a child of an element with the id my_dropdown, you could do:

#my_dropdown .dropdown-menu:after {
    border: none !important;
    content: "" !important;
}

This would allow you to have an arrow for other dropdowns, while hiding it for this specific dropdown.