title: Bootstrap 3. Add different navbar brand image sizes per screen size
body: <p>I have a perfectly fine Bootstrap 3 website. Every page contains a navbar-brand class and a normal navbar. I used the navbar-brand class to display a logo on my website. It works fine in the major browsers and on extremely large screen sizes(beamer/projector) and normal desktop/laptop/tablet screen sizes. </p>
  
  <p>The only issue I am having is that the logo does move and resize a little on mobile using the "img-responsive" class, and it is nicely positioned in its parent element, but for my taste it is slightly too big(on mobile sizes, 4.3 and 5.5 inch). It pushes to the upper line of the browser and the bottom line of the navbar. How can I modify my navbar-brand class to display a tad smaller logo for those screen sizes (&lt;7 inch)? </p>
  
  <p>Can I add a media query to my CSS for those screen sizes and add custom width and height attributes? Is there something else I need to do?</p>
  
  <p>I am new to web development and with this part I have no idea what I am doing. </p>
  
  <p>My navbar code: </p>
  
  <pre><code>               &lt;div class="navbar navbar-default navbar-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                          &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="index.html"&gt;&lt;img class="img-responsive" alt="Logo" src="images/logo_final.png"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;
                              &lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;An element&lt;/a&gt;
                              &lt;ul class="dropdown"&gt;
                                  &lt;li&gt;Some elements&lt;/li&gt;
                                  &lt;li&gt;Some elements&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                          &lt;/li&gt;
                                  &lt;li&gt;Some elements&lt;/li&gt;
                                  &lt;li&gt;Some elements&lt;/li&gt;
                                  &lt;li&gt;Some elements&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Yeah... Some help would be extremely appreciated.</p>
  
  <p>Thank you in advance</p>