ハンバーガーメニュー - 背景色の遅れ（bootstrap4）

Question

私は数ヶ月前にコーディングを開始しました。私は基本的なポートフォリオサイトでほぼ完成しました。

私が解決できない問題は、ハンバーガーメニューの背景です。私はCSSを使ってメニューに背景色を付けることができましたが、それをクリックするとメニューはその色に直ちに変わりません。非常に短い遅延がありますが、それは私を少しイライラします！

コードのいずれかが乱雑であれば謝罪してください。どんな建設的な批判も歓迎です！

リンク： https://codepen.io/MikeyT24/pen/xrQvxe

HTML

<nav class="navbar fixed-top navbar-inverse navbar-toggleable-sm opaque-navbar"> 
    <div class="container containernav"> 
    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#myContent" aria-controls="myContent" aria-expanded="false" aria-label="toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <h1 class="navbar-brand m-0 ">Michael Treeves</h1> 
    <div class="collapse navbar-collapse" id="myContent"> 
    <div class="navbar-nav ml-auto"> 
    <a class="nav-item nav-link" href="#about">About</a> 
    <a class="nav-item nav-link" href="#portfolio">Portfolio</a> 
    <a class="nav-item nav-link" href="#contact">Contact</a> 
    </div> <!--navbar-nav--> 
    </div> <!--collapse--> 
    </div> <!--container--> 
</nav> 

CSS

/*********************************************************** 
    OPAQUE NAVBAR SECTION 
**********************************************************/ 
.opaque-navbar { 
    background-color: rgba(0,0,0,0); 
    height: 50px; 
    border-bottom: 0px; 
    transition: background-color 0.5s ease 0s; 
} 

.opaque-navbar.opaque { 
    background-color: rgba(100,100,150,0.9); 
    height: 50px; 
    transition: background-color 0.5s ease 0s; 
} 

@media (max-width: 992px) { 
    .opaque-navbar { 
    height: 50px; 
    transition: background-color .5s ease 0s; 
} 

@media (max-width: 768px){ 
.collapse { 
    background-color: rgba(100,100,150,0.9); 
} 

スクリプト（該当する場合わからない）

* OPAQUE NAVBAR SCRIPT 
    ********************************************************** 
    */ 

    // Toggle tranparent navbar when the user scrolls the page 

    $(window).scroll(function() { 
    if($(this).scrollTop() > 650) /*height in pixels when the navbar becomes non opaque*/ 
    { 
     $('.opaque-navbar').addClass('opaque'); 
    } else { 
     $('.opaque-navbar').removeClass('opaque'); 
    } 
}); 

どうもありがとう！

マイク。

Answer 1

navbarブートストラップを開いている間に、バックグラウンドは、数秒後に適用する理由です.collapsing、その後.collapseに.collapseクラスを変更します。

代わりに.navbar-collapseを使用してください。

.navbar-collapse { 
    background-color: rgba(100,100,150,0.9); 
}