How to add arrow bootstrap navbar brand

Question

How do you add an arrow using css to the navbar brand (see image example)

The arrow should not be visible when in mobile view.

The following doesn't work - clearly I'm not the best at css.

 .navbar-default {
        .navbar-brand {
                position: relative; 
                float: left;
                margin-right:30px;
                color: @navbar-default-brand-color;
                &:hover,
                &:focus {
                    color: @navbar-default-brand-hover-color;
                    background-color: @navbar-default-brand-hover-bg;
                }

                &:after {
                      content: " ";
                      display: block;
                      width: 0;
                      height: 0;
                      border-top: 19px solid transparent;
                      border-bottom: 19px solid transparent;
                      border-left: 12px solid @brand-secondary;
                      position: absolute;
                      top: 50%;
                      margin-top: -19px;
                      left: 100%;
                      z-index: 3;
                }


                &:before {
                      content: " ";
                      display: block;
                      width: 0;
                      height: 0;
                      border-top: 19px solid transparent;
                      border-bottom: 19px solid transparent;
                      border-left: 12px solid white;
                      position: absolute;
                      top: 50%;
                      margin-top: -19px;
                      margin-left: 1px;
                      left: 100%;
                      z-index: 3;
                }


               @media (max-width: @grid-float-breakpoint) {


               }
        }
    }

the html is as follows

 <nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" type="button">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Bootstrap</a>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
            <li class="active">
               <a href="#">Getting started</a>
            </li>
            <li>
               <a href="#">CSS</a>
            </li>
            <li>
               <a href="#">Components</a>
            </li>
            <li>
               <a href="#">Javascript</a>
            </li>
             <li>
               <a href="#">Customize</a>
            </li>
     </div>
  </div>
</nav>

Update: I've managed to get it working using the before and after css. How do I overide this css with the media query i.e whats the css that goes inside the media query to remove it on a mobile device?

Answer 1

have created a small fiddle with example code of how to do this for list items. It can be edited slightly and re-applied to your code to achieve the desired affect.

It's all about the :before and :after selectors.

http://jsfiddle.net/dgc6ajbL/