How to avoid Logo changing position on resizing of window?

Question

I am working on Bootstrap navbar and after resizing as the hamburger menu shows the logo shifts its position and even overflows the navbar . How can I make the logo responsive so that it changes its size or position as the navbar is resized in the window?

        <!-- Navigation Bar -->
    <div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">


           <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
   <span class=" glyphicon glyphicon-menu-hamburger"></span>
                </button>
           </div>
                <a class="navbar-brand" href="#">
                     <img src="../images/LOL_LOGO_NEW-01.png" />
                </a>
     <div class="collapse navbar-collapse" id="menu"> 
            <ul class="navbar navbar-nav" id="navbar-menu">
                <li><a href="#" >WHAT WE DO</a></li>
                <li><a href="#">WHO WE ARE</a></li>
                <li><a href="#">OUR WORK</a></li>
                <li><a href="#">VENTURES</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONNECT</a></li>
            </ul>
    </div>
</div>  

Also, along with the answer if you could provide me with the reason as to why it happened then it'll be appreciated as I am still in the learning phase.

Thanks. :)

without resizing it looks normal

look how it overflows on resize

Answer 1

I added some background color so you can easily see the block for each container. The logo will be red , the navbar-header will be yellow , and the navbar-collapse will be green .

navbar-brand has a float: left so it will float to the left of the block, if you have it after navbar-header (which has display:block so it will take the whole width of the screen) block it will just floating left below, you can move it inside navbar-header or move it up outside of container-fluid.

 .navbar-brand { background: red; float: right; display: block; } .navbar-header { background: yellow; } .navbar-collapse { background: green; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Navigation Bar --> <div class="navbar navbar-default" id="navbar-outer"> <div class="container-fluid" style="margin:0px;"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="../images/LOL_LOGO_NEW-01.png" /> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class=" glyphicon glyphicon-menu-hamburger"></span> </button> </div> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar navbar-nav" id="navbar-menu"> <li><a href="#">WHAT WE DO</a></li> <li><a href="#">WHO WE ARE</a></li> <li><a href="#">OUR WORK</a></li> <li><a href="#">VENTURES</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONNECT</a></li> </ul> </div> </div>