Twitter Bootstrap 3 - Add Arrow on Dropdown Menu for Desktop Only

Question

So I used this method to add my arrow: bootstrap 3 arrow on dropdown menu

Works great on desktop, but the only problem is the arrow still appears in the mobile view when it collapses (<768px).

Demo: http://jsfiddle.net/nolabel/Mk9PD/

.navbar-nav>li>.dropdown-menu, ul.dropdown-menu {
    border: 5px solid #7ed1e3;
    border-radius: 10px;
}
.dropdown-menu:after {
  position: absolute;
  top: -16px;
  left: 24%;
  display: inline-block;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #7ed1e3;
  border-left: 11px solid transparent;
  content: '';
}
.dropdown-menu:before {
  position: absolute;
  top: -17px;
  left: 25%;
  display: inline-block;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #ccc;
  border-left: 12px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

What is the best way to fix this?

What should happen with the content in the dropdowns? Should they still be there and should just the arrows disappear? — sebastian_oe, Mar 18 '14 at 22:17
sebastian_oe, it should show like it normally show. Juan C. got a pretty good solution. — nolabel, Mar 18 '14 at 22:35

Juan · Accepted Answer · 2015-11-02T17:03:42.710

5

you could put your :before and :after inside of a media query with the device width that you wish to be shown only

demo

@media screen and (min-width:750px) {
    .dropdown-menu:after {
        position: absolute;
        top: -16px;
        left: 24%;
        display: inline-block;
        border-right: 11px solid transparent;
        border-bottom: 11px solid #7ed1e3;
        border-left: 11px solid transparent;
        content:'';
    }
    .dropdown-menu:before {
        position: absolute;
        top: -17px;
        left: 25%;
        display: inline-block;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #ccc;
        border-left: 12px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        content:'';
    }
}

edited Nov 02 '15 at 17:03

answered Mar 18 '14 at 22:21

Juan

4,910
3
37
46

1

Not sure why you got a vote down, but this solution works! I was trying to use the responsive utility classes, but that has been very unsuccessful. – nolabel Mar 18 '14 at 22:30
1

Juan, it is more correct to use min-width:768px as opposed to 750px b/c the nav collapses @767px. – nolabel Mar 18 '14 at 22:43

Twitter Bootstrap 3 - Add Arrow on Dropdown Menu for Desktop Only

1 Answers1