'Bootstrap 4 beta navbar-brand logo with img-fluid class does not resize when collapsed

Using Bootstrap 4 beta.

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.

I would like the logo to shrink to the point where wrapping the toggler button is not necessary.

MIG Logo

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
 
    <style>
    #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;
    }
    
    </style>
 
</head>



<body>
    <div id ="wrapper">
        <nav class="navbar navbar-expand-md navbar-toggleable fixed-top pt-0" style="background-color: #515254;">  <!-- navbar-expand  -->
            <div class="nav w-100 justify-content-between align-middle">
                <a class="navbar-brand mt-2" href="http://www.methodinvestmentgroup.com">
                    <img class="img-fluid" alt="Method Investment Group logo" src="https://i.stack.imgur.com/s3oSY.jpg">
                </a>
                <!-- </div>    -->
                <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">
                    <span class="navbar-toggler-icon ">&#9776;</span>
                </button>

                <div class="collapse navbar-collapse justify-content-end " id="MIGnavbarToggler">    
                    <div class='mig-header-menu-bar more-rounded bg-faded'>
                        <ul class='nav nav-pills more-rounded bg-light' >
                            <li class='nav-item'>
                                <a class='nav-link' href="index.php">Login</a>
                            </li> 
                            <li class='nav-item'>
                                <a class='nav-link' href="About.php">About Us</a>
                            </li>                                                          
                            <li class='nav-item'>
                                <a class='nav-link' href="ShowFAQ.php">Frequently Asked Questions</a>
                            </li>             
                        </ul>
                    </div>                        
                </div>  <!-- End of collapse div  -->
            </div>
        </nav>



    <!-- jQuery first, then Popper, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>
csstwitter-bootstrapbootstrap-4


Solution 1:[1]

I added an id to the parent div and the following media query:

@media screen and (max-width: 340px){
    #mig-header > a {
        max-width: 200px;
    }
    #mig-header > button {
        padding: 0.25rem;
    }        
}

It works perfectly.

Solution 2:[2]

This works for me to shrink the logo on mobile:

.navbar-brand img {
    max-width: 100%;
}

Solution 3:[3]

You should set fixed dimensions for your logo like so: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="https://placehold.it/60" width="30" height="30" alt="">
  </a>
</nav>

That's because the height of the navbar does NOT change and that's the officially recommended way of doing it:

https://getbootstrap.com/docs/4.0/components/navbar/#brand

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dave
Solution 2 mmerle
Solution 3 WebDevBooster

Related Questions