title: Bootstrap 4 beta navbar-brand logo with img-fluid class does not resize when collapsed
body: <blockquote>
    <p>Using Bootstrap 4 beta.  </p>
  </blockquote>
  
  <p>My responsive navbar contains a logo in the navbar-brand on the left side and an inline menu of links on the right side.  When the viewport changes, the navbar collapses correctly, but the logo does not shrink as it should.  This forces the hamburger to wrap below the logo for the smallest viewports.  </p>
  
  <p>I would like the logo to shrink to the point where wrapping the toggler button is not necessary.</p>
  
  <p><a href="https://i.stack.imgur.com/" rel="nofollow noreferrer">MIG Logo</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
  &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/&gt;
      &lt;link rel="stylesheet" href="css/font-awesome.min.css"/&gt;
   
      &lt;style&gt;
      #wrapper {
          min-height:100%; /* For Sticky Footer */
          position:relative;
      } 
  
      .mig-header-menu-bar{
          border-style: solid;
          border-width: 3px;
          border-color: #7C9D63;
      }
  
      .mig-header-menu-bar a:link, a:visited{
          color: #00008B;
          text-decoration: none;
      }
  
      .mig-header-menu-bar a:hover, a:active {
          color: #7C9D63;
          text-decoration: none;
      }
  
      .mig-header-menu-toggle-button{
          color: white;
          background-color: #7C9D63;
          max-height: 50px;   
          z-index: 9900;
          margin-top: 1.5rem;   
      }
  
      .mig-header-menu-bar  .nav-pills  .nav-item.show  .nav-link  {    
          background-color: #7C9D63;
      }
  
      .mig-header-menu-bar  .dropdown-menu {
          border-bottom-width: 4px;
          border-bottom-color: #7C9D63;
      }
  
      .more-rounded {
          border-radius: .50rem;
      }
      
      &lt;/style&gt;
   
  &lt;/head&gt;
  
  
  
  &lt;body&gt;
      &lt;div id ="wrapper"&gt;
          &lt;nav class="navbar navbar-expand-md navbar-toggleable fixed-top pt-0" style="background-color: #515254;"&gt;  &lt;!-- navbar-expand  --&gt;
              &lt;div class="nav w-100 justify-content-between align-middle"&gt;
                  &lt;a class="navbar-brand mt-2" href="http://www.methodinvestmentgroup.com"&gt;
                      &lt;img class="img-fluid" alt="Method Investment Group logo" src="https://i.stack.imgur.com/s3oSY.jpg"&gt;
                  &lt;/a&gt;
                  &lt;!-- &lt;/div&gt;    --&gt;
                  &lt;button class="navbar-toggler mig-header-menu-toggle-button" type="button" data-toggle="collapse" data-target="#MIGnavbarToggler" aria-controls="MIGnavbarToggler" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon "&gt;&amp;#9776;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;div class="collapse navbar-collapse justify-content-end " id="MIGnavbarToggler"&gt;    
                      &lt;div class='mig-header-menu-bar more-rounded bg-faded'&gt;
                          &lt;ul class='nav nav-pills more-rounded bg-light' &gt;
                              &lt;li class='nav-item'&gt;
                                  &lt;a class='nav-link' href="index.php"&gt;Login&lt;/a&gt;
                              &lt;/li&gt; 
                              &lt;li class='nav-item'&gt;
                                  &lt;a class='nav-link' href="About.php"&gt;About Us&lt;/a&gt;
                              &lt;/li&gt;                                                          
                              &lt;li class='nav-item'&gt;
                                  &lt;a class='nav-link' href="ShowFAQ.php"&gt;Frequently Asked Questions&lt;/a&gt;
                              &lt;/li&gt;             
                          &lt;/ul&gt;
                      &lt;/div&gt;                        
                  &lt;/div&gt;  &lt;!-- End of collapse div  --&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
  
  
      &lt;!-- jQuery first, then Popper, then Bootstrap JS. --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>