Derp Derp - 5 months ago 14
CSS Question

How to avoid Logo changing position on resizing of window?

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 Source

Move your logo out of that container-fluid so it become sibling with container-fluid:

  <a class="navbar-brand" href="#">
    <img src="../images/LOL_LOGO_NEW-01.png" />
  </a>

<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">
  <a class="navbar-brand" href="#">
    <img src="../images/LOL_LOGO_NEW-01.png" />
  </a>
  <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>
    <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>