title: Bootstrap full responsive navbar with mini logos for each menu item
body: <p>I hope you all are fine. I am new here, and I have a question. I am working with mvc , with c#, html, css and boostrap.
  I am trying to develop a responsive nav bar.  It contains icons for each menu item. For example, home (a house icon with words under it), item 2, item 3 and so on.
  when displaying the nav bar in movile devices ( small screens) the icons in the hamburguer menu continue to be displayed as big as used to be in the computer´s version.
   I would like to adapt the icnons sizes(the brand logo and the items) in the nav bar  for each screen size..here you are the code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
  
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&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="brand"&gt;
                  &lt;img class="img-responsive" src="http://Brandlogo.com/brandlogo.png alt=""&gt;
              &lt;/a&gt;
  
          &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
  
                  &lt;li&gt;
                      &lt;a href="@Url.Action("action1", "item1")"&gt;
                          &lt;img class="img-responsive" src="/images/item1.png" alt="imagen"&gt; item1
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#cont-4"&gt;
                          &lt;img class="img-responsive " src="/images/item2.png " alt="imagen"&gt;item2
                      &lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
  
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  
      &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p>thank you for your help</p>