I am trying to remove the arrow that appears on a drop down menu in Twitter Bootstrap framework. Has anyone figured a way of removing the arrows?
Just remove border-bottom from dropdown-menu will remove arrow from the navigation bar.
.navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after{
border-bottom: none;
}
I've found the best solution is to add overflow:hidden;
to .dropdown-menu
Removing the caret class from the link removes the arrow from the navigation bar,
.dropdown-menu::before,
.dropdown-menu::after {
border: none;
content: none;
}
Will remove the little tab from the drop down menu its self.