汉堡包菜单-背景颜色延迟（bootstrap4）

Question

我几个月前开始编写代码，我几乎完成了一个基本的投资组合网站。

我无法解决的问题是汉堡包菜单背景。我已经设法用 CSS 为菜单设置了背景颜色，但是当单击它时，菜单不会立即更改为该颜色。延迟很短，但让我有点沮丧！

如果有任何代码混乱，我们深表歉意。欢迎任何建设性的批评！

Link: 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 bootstrap 将 .collapse class 更改为 .collapsing 然后 .collapse 这就是为什么后台在几秒钟后应用的原因。

改用.navbar-collapse。

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

汉堡包菜单-背景颜色延迟（bootstrap4）

Hamburger menu - background color delay (bootstrap4)

html

css

twitter-bootstrap-4

hamburger-menu