title: Bootstrap navbar responsive Logo
body: <p>I have this problem with a logo on my bootstrap page, i'm trying my best to make a logo on my navbar stay at the center of the navbar, and stay responsive as i shrink the window, but the navbar text goes behind the image as i shrink the window, and when i click on the dropdown button when it shows, my logo just stays at the top of the page.I need it to move with the dropdown effect and stay glued to the bottom of the navbar, here is my bootstrap code:</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-static-top" id="main"&gt;
      &lt;div class="container"&gt;
      &lt;img src="images/LogoTango2.png" alt="tango" class="logo"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;a href="index.html" class="navbar-brand"&gt;начало&lt;/a&gt;
  
      &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;&lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse navHeaderCollapse" id="right"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="zakuski.html"&gt;цех за закуски&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="opakovka.html"&gt;опаковка&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="gostilnica.html" id="gostilnica"&gt;гостилница&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;контакт&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And that is my css of the logo:</p>
  
  <pre><code>.logo {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      left: 0;
      right: 0;
      z-index: 2;
  }
  </code></pre>
  
  <p>If you find anything, please notify me, i'll be really thankful!</p>