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.

Bootstrap

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

I cannot find a reference to the markup you have in the question. — Shef, Apr 03 '13 at 15:57

Shef · Accepted Answer · 2013-04-03T16:07:45.780

16

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.

edited Apr 03 '13 at 16:07

answered Apr 03 '13 at 16:01

Shef

44,808
15
79
90

sorry this not get rid of the upward arrow – Keith Power Apr 03 '13 at 16:03
yet the white arrow is gone but there seems to be a dark version still remaining with half opacity – Keith Power Apr 03 '13 at 16:10
4

I had to do this also, thanks .navbar .nav > li > .dropdown-menu:before { border-bottom: none; } – Keith Power Apr 03 '13 at 16:19

score 13 · Answer 2 · edited Jul 05 '13 at 10:42

13

The following css worked for me:

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

If you remove any of the two selectors, some detail from the arrow would still remain - either a gray or a white triangle.

(Just decided to add this in case someone is looking for an answer later, as the accepted answer didn't work for me.)

edited Jul 05 '13 at 10:42

Matt Cain

5,638
3
36
45

answered Apr 11 '13 at 10:10

June Pecherska

191
1
1
8

score 3 · Answer 3 · answered Jun 27 '13 at 19:06

3

You can also do:

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

This will disable the arrow and its shadow.

answered Jun 27 '13 at 19:06

Vidal Quevedo

986
10
10

bootstrap remove upward arrow in dropdown

3 Answers3

Linked