Search code examples
htmlcsstwitter-bootstrapdropdowntwitter-bootstrap-2

Remove triangle(?) ::before on bootstrap 2.3.2 dropdown menu

I have a navbar that can be configured to be both vertical or horizontal placed on a page. It is for a widget on a system using bootstrap 2.3.2.

I want to remove or move the triangle above the dropdown. (What is it called?)

I have tried to set the ::before to display:none , content:none, etc without any success. Altering the css position left and top only seem to affect the border. Is there no way to remove/hide this in a neat way? or even better, position it on the left side, towards the navbar?

enter image description here

.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, .2);
content: '';
color: rgba(0,0,0,0);}

Or is this default behavior from bootstrap? The menu is created by reading through a JSON, so i was hoping for to use the same code for the vertical and horizontal menu, since this is just a visual "issue".

Solution

  • Easy solved by setting content to none on both ::before and ::after. Should have thought of that ::Before I posted.