切换时引导导航栏折叠为白色

Question

我在引导程序中有一个半透明的导航栏，但是当屏幕大小崩溃并在切换时转到“移动”视图时，它会将内容向下推，并在页面顶部留下白色背景。

这是我的代码：

HTML

<nav class="navbar navbar-custom" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#AboutMe">About Us</a></li>
            <li><a href="#Portfolio">Portfolio</a></li>
            <li><a href="#ContactMe">Contact Us</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS

.navbar-custom {
    background-color: rgba(240, 240, 240, 0.3);
}
.navbar-custom .navbar-nav > li > a, .navbar-custom .navbar-brand {
    color: black;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
    color: black;
    background-color: rgba(240, 240, 240, 0.3);
}
@media only screen and (max-width: 766px) {
    .collapsing, .in {
        background-color:rgba(240, 240, 240, 0.3)!important;
    }
    .collapsing ul li a, .in ul li a {
        color: black!important;
    }
    .collapsing ul li a:hover, .in ul li a:hover {
        color: white!important;
    }
}
.navbar-custom .navbar-toggle {
    border-color:black;
}
.navbar-custom .icon-bar {
    background-color:black;
}

我已尝试更改 position 和 z-index，但似乎都不起作用，是否有更简单或不同的方法来实现我所做的？

Here's my codepen.

Answer 1

这是因为您将 background-color: green 设置为 #container1，因此 html 和 body 仍将具有白色背景色。 添加到您的 CSS

html {background-color: green}

Answer 2

在您的情况下，绿色背景位于 #container1 元素上。当导航菜单在移动设备上折叠/展开时，它会将#container1 元素向下推（这意味着导航菜单后面不再有绿色背景）。

我建议绝对将导航菜单定位在 #container1 元素上，然后添加填充以考虑菜单的高度。

Updated Example

.navbar-custom {
  background-color: rgba(240, 240, 240, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

或者，您可以避免绝对定位，只需在 body 元素上设置背景（它将始终位于导航菜单的后面）。