title: How to add new button navbar view Mobile only (using bootstrap)
body: <p>I want to create new menu with new button view in screen Mobile
  like this
  <a href="http://i.stack.imgur.com/zMQjQ.png" rel="nofollow">http://i.stack.imgur.com/zMQjQ.png</a>
  and this menu hide if screen not Mobile</p>
  
  <pre><code>        &lt;nav class="navbar navbar-default" role="navigation"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"&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;button type="button" class="navbar-toggle btn-sociall pull-left" data-toggle="collapse" data-target=".navbar-social"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse navbar-menubuilder"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
          &lt;div class="collapse  navbar-collapse navbar-social"&gt;
              &lt;ul class="nav  navbar-nav navbar-social"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  
      &lt;/nav&gt;
  </code></pre>
  
  <p>this code retrun
  <a href="http://i.stack.imgur.com/F0Eje.png" rel="nofollow">http://i.stack.imgur.com/F0Eje.png</a></p>
  
  <p>This my answer is there a better way. i used class hidden.</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-menubuilder"&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;button type="button" class="navbar-toggle btn-social pull-left" data-toggle="collapse" data-target=".navbar-social"&gt;
              &lt;span class="icon-social"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse navbar-menubuilder"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;div class="collapse hidden navbar-collapse navbar-social "&gt;
          &lt;ul class="nav hidden navbar-nav navbar-social "&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-facebook"&gt;&lt;/span&gt;Facebook&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-twitter"&gt;&lt;/span&gt;twitter&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-linkedin"&gt;&lt;/span&gt;Linkedin&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-skype"&gt;&lt;/span&gt;Skype&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-googleplus"&gt;&lt;/span&gt;GooglePlus&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-youtube"&gt;&lt;/span&gt;Youtube&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-share"&gt;&lt;/span&gt;Share&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="menu-social menu-rss"&gt;&lt;/span&gt;Rss&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and add code javascript</p>
  
  <pre><code>$(function() {
    if(($(window).width() &lt;= 767)) {
      $(".navbar-social").removeClass('hidden');
    }
  });
  </code></pre>