title: How to add arrow bootstrap navbar brand
body: <p>How do you add an arrow using css to the navbar brand (see image example)</p>
  
  <p><a href="https://i.stack.imgur.com/D5s1N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D5s1N.png" alt="enter image description here"></a></p>
  
  <p>The arrow should not be visible when in mobile view.</p>
  
  <p>The following doesn't work - clearly I'm not the best at css.</p>
  
  <pre><code> .navbar-default {
          .navbar-brand {
                  position: relative; 
                  float: left;
                  margin-right:30px;
                  color: @navbar-default-brand-color;
                  &amp;:hover,
                  &amp;:focus {
                      color: @navbar-default-brand-hover-color;
                      background-color: @navbar-default-brand-hover-bg;
                  }
  
                  &amp;: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;
                  }
  
  
                  &amp;: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) {
  
  
                 }
          }
      }
  </code></pre>
  
  <p>the html is as follows</p>
  
  <pre><code> &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
       &lt;div class="navbar-header"&gt;
           &lt;button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" type="button"&gt;
               &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
           &lt;/button&gt;
           &lt;a class="navbar-brand" href="#"&gt;Bootstrap&lt;/a&gt;
       &lt;/div&gt;
       &lt;div id="navbar" class="navbar-collapse collapse"&gt;
           &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;
                 &lt;a href="#"&gt;Getting started&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="#"&gt;CSS&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="#"&gt;Components&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="#"&gt;Javascript&lt;/a&gt;
              &lt;/li&gt;
               &lt;li&gt;
                 &lt;a href="#"&gt;Customize&lt;/a&gt;
              &lt;/li&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>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?</p>