title: Bootstrap navbar toggle not working properly, logo hiding below while in mobile view
body: <p>I got issues with the boostrap navbar toggle, have been struggling with this for some time now. Firstly, my logo gets hidden below when decreasing window size, like <a href="https://i.stack.imgur.com/4gejB.jpg" rel="nofollow noreferrer">this</a>. It seems the container is too high, but if i decrease it, other content got affected. Next, when i decrease window size, same happens with navigation links, they get below the logo pushing the carousel photo like <a href="https://i.stack.imgur.com/uUPCa.jpg" rel="nofollow noreferrer">this</a>. At this point i want the nav links hidden and toggle button to show up.
  Lastly, the navigation for mobile view just shows with transparent background and unnecessary top padding as shown in first screenshot.</p>
  
  <p>Relevant HTML:</p>
  
  <pre><code>    &lt;div class="navbar navbar-default" data-spy = "affix" data-offset-top = "200" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;a class="navbar-brand" href="index-en"&gt;&lt;img class = "logo" src = "logo.png" alt = ""&gt;&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class="active"&gt;&lt;a class = "active" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;       
              &lt;li&gt;&lt;a href="about"&gt;About us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="employees"&gt;Employees&lt;/a&gt;&lt;/li&gt;       
              &lt;li&gt;&lt;a href="where"&gt;Where we are&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container{
      min-height: 100%!important;
      margin: 0 auto!important;
      padding: 0 0 0px!important;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: #4E4F51!important;
      text-transform: uppercase!important;
      font-family: 'Raleway', sans-serif!important;
      font-size: 16px;
      text-decoration: none;
      margin: 0px 10px;
      padding: 10px 10px;
      position: relative;
      z-index: 0;
      cursor: pointer;
  }
  
  .navbar-default .navbar-nav &gt; .active  &gt; a,
  .navbar-default .navbar-nav &gt; .active  &gt; a:hover,
  .navbar-default .navbar-nav &gt; .active  &gt; a:focus {
      color: #3BB34A!important;
      background-color: transparent!important;
  }
  .navbar-header {
      overflow:hidden!important;
  }
  .logo{
      max-height:100%;
  }
  .navbar-brand {
      padding: 0px!important;
      height: 140px!important;
  }
  
  .navbar-brand&gt;img {
      padding: 15px!important;
      width: auto!important;
  }
  
  .navbar-toggle {
      padding: px!important;
      margin: 25px 15px 25px 0!important;
  }
  .navbar {
      margin-bottom: 0!important;
  }
  
  .navbar-default {
      z-index:9999!important;
  }
  .navbar-default .navbar-nav {
      padding-top:50px;
  }
  .affix{
      top: 0;
      width: 100%;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      opacity: 0.9;
      max-height:140px;
  
  }
  .affix-top {
    -webkit-transition:padding 1.5s ease-in-out;
    -moz-transition:padding 1.5s ease-in-out;  
    -o-transition:padding 1.5s ease-in-out;         
    transition:padding 1.5s ease-in-out;
    max-height:140px;
  }
  </code></pre>
  
  <p>I would appreciate some suggestions on how to fix this.
  Just added new div with fixed height, but it didn't work, logo stayed in it's place, but the toggle button isn't showing.</p>