スクロールのロゴを変更するとメニュー項目が下に移動する

Question

私が働いているサイトは、ロゴの位置とサイズを上から左に変更するように強制され、ユーザーがスクロールしているときに新しいサイズに合わせてナビバを縮めますダウン。私はそれをjavascriptで動作させることができましたが、別の問題が発生しました。ロゴが左に移動すると、下のメニュー項目がプッシュされます。良いことを示すために

ここフィドルです：ときダウンユーザーがスクロール私が欲しいものhttps://jsfiddle.net/resch/d6vfertf/3/

があり、ロゴははるかメニューの左に行くが、メニュー項目は、（垂直話す）真ん中に滞在しますnavbar。このブログは私がやろうとしていますどのような完璧示し：

NOTE http://www.depoisdosquinze.com/

は、ここに私の答えを見つけることができませんでした、これは既に回答された場合に閉じるように、重複して投票としてマークすること自由に感じなさい。 ありがとうございました！

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

問題は、あなたがあなたの<div class="collapse navbar-collapse" id="myNavbar">を下にスクロールするとき、それは完全な幅のままということです。インラインで表示する必要がある問題を解決するための最速の方法、つまりdisplay: inline-blockを追加してください。スタイルが永続的でない場合は、!importantを追加します。

ただし、コードに!importantを使用しないようにすることをお勧めします。 !importtantをコードに使用せずに変更を実装しやすくするため、flexbox（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）について読むことをお勧めします。

フロッグhttp://flexboxfroggy.comは、フレックスボックスの学習にも役立ちます。私はこれが役立つことを願っています