Changing logo on scroll pushes menu items down

Question

The site I'm working is suposed to change the logo location and size, from top to the far left, and incidentally shrink the navbar to fit the new size, when the user is scrolling down. I've managed to get it to work with javascript but now a different problem ocurred: when the logo is repositioned to the left it pushes the menu items below.

To better illustrate it here's a fiddle: https://jsfiddle.net/resch/d6vfertf/3/

What I want is when the user scrolls down, the logo goes to the far left of the menu but the menu items stay in the middle (vertically speaking) of the navbar.

NOTE: This blog illustrates perfectly what I am trying to do: http://www.depoisdosquinze.com/

Couldn't find my answer here, please feel free to mark as duplicate and vote to close if this is already answered. Thank you!

var $header = $("nav.navbar");
var $logo = $("a.logo");
var $li = $("ul.navbar-nav > li");
var $img = $("img#logo");
$(window).scroll(function() {
  var e = $(this).scrollTop();
  if (e > 90) {
    $header.css("height", "60px");
    $img.css("max-width", "180px");
    $logo.removeClass('logo');
    $logo.addClass('logo.scroll');
    $li.addClass('scroll');
  } else {
    $header.css("height", "120px");
    $img.css("max-width", "300px");
    $logo.removeClass('logo.scroll');
    $logo.addClass('logo');
    $li.removeClass('scroll');
  }
});

img#logo {
  max-width: 300px;
  border: none;
}

.navbar {
  position: relative;
  margin-bottom: 0;
  background-color: white;
  border: 0;
  font-size: 12px !important;
  letter-spacing: 4px;
  height: 120px;
  opacity: 0.9;
}

.navbar-nav {
  float: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.navbar-nav>li.scroll {
  display: inline-block;
  float: none;
  padding-top: 0px;
}

.navbar-nav>li {
  display: inline-block;
  float: none;
  padding-top: 70px;
}

.navbar-fixed-top {
  position: fixed !important;
}

.logo.scroll {
  position: absolute;
  display: block;
}

.logo {
  position: absolute;
  left: 50%;
  margin-left: -160px !important;
  display: block;
}

.navbar-toggle {
  z-index: 3;
}

.navbar li a,
.navbar .navbar-brand {
  color: #beb5ac !important;
}

.navbar-nav li a:hover {
  color: #ded8d2 !important;
  transition: color 1s ease;
}

.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
}

@media screen and (max-width: 780px) {
  .logo {
    margin-top: -50px;
    padding-top: 10px !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <a id="brand" class="logo" href="teste3.html">
        <img id="logo" src="https://s4.postimg.org/3tdea6k19/logo2.png" alt=""></a>
      <div class="navbar-header navbar-header-center">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="index"><a href="teste3.html">INÍCIO</a></li>
          <li class="sobre"><a href="teste3_about.html">SOBRE</a></li>
          <li class="ilustracao"><a href="teste3.html#ilustracao">ILUSTRAÇÃO</a></li>
          <li class="design"><a href="teste3.html#design">DESIGN GRÁFICO</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Answer 1

The problem is that when you scroll down your <div class="collapse navbar-collapse" id="myNavbar">, it stays full width. The quickest way to solve the problem you need to display in inline i.e. add display: inline-block to it. If the style is not persistent add !important to it.

However, it is a good idea to avoid using !important in your code. I will suggest reading about flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) as it will make it easier to implement changes without using !importtant in your code.

Froggy http://flexboxfroggy.com is also helpful to learn flexbox. I hope this helps.