Bootstrap Navbar Brand image gets pushed down upon collapse

Question

My navbar brand image gets pushed down when I resize my screen to simulate mobile. How can I use media queries to resize the navbar-header (since I think it's the one that doesn't resize and forces the brand image to go down)?

   <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"style="margin-top:27px;">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" style="">
           <%=image_tag "elem_logo-white.png", :style => "width: 95%;"%> 
          </a>
   </div>

I did this line of code however it did not work. The image became smaller, however the navbar still fragmented. @media (max-width:768px){ .navbar-brand img{ width:100px!important; } }

Answer 1

You have to give it smaller width on small screens like

@media (max-width:768px){
 .navbar-brand img{
   width:100px;
   max-height:50px;
 }
}

Answer 2

I solved it by editing Peter Wilson's suggestion. Here's what worked:

    @media (max-width:768px){
        .navbar-brand{
       width:70vw!important;
      }
    }