title: Bootstrap css, how to make always visible navbar-toggle?
body: <p>I'd like to add one of those buttons that are shown when on mobile device in order to open the collapsed menu in the navbar, but haven't been able so far, here's the less code and html</p>
  
  <pre><code>  .navbar-toggle-always{
  
      .navbar-toggle;
  
      @media (min-width: 768px){
        display: block!important;
      }
  
      .zero-margins;
  
    }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>      &lt;div class="pull-left "&gt;
          &lt;button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar"&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;/div&gt;
  </code></pre>
  
  <p>upon further inspection I've noticed that the element is not hidden, it's just transparent, for some reason if I add </p>
  
  <pre><code>    @media (min-width: 768px){
        display: block!important;
        background-color:pink;
      }
  </code></pre>
  
  <p>i see it fine, but withouth the icon-bar bars or the borders. I'll keep working on it  </p>
  
  <p><img src="https://i.stack.imgur.com/dSqpj.png" alt="i can see it!"></p>
  
  <p>and this is how I would like to show it: </p>
  
  <p><img src="https://i.stack.imgur.com/XKpzq.png" alt="Correct"></p>