我正在使用Bootstrap,并尝试使基本的汉堡菜单按钮在单击后更改背景颜色。我可以在浏览器检查时改变颜色,但无法在我的CSS中复制。我也无法使颜色仅在单击时更改。我认为这可能是一个特殊性问题。汉堡包按钮是从Bootstrap示例中获取的。
下面的导航栏被编码为在左上方显示“Food, LLC”,并且在宽度缩小到769px之前所有其他链接都将被隐藏。当达到769px宽度时,汉堡包按钮出现。然后,当单击按钮时,链接会出现为下拉列表。
我使用红色作为示例的背景颜色,但可以欣赏任何颜色变化!
我尝试尽可能具体地使用navbar-toggler类来查看是否可以进行更改,但无法实现。这在Chrome上测试过。
此外,我尝试使用“:active” CSS属性,但没有成功。
下面的导航栏被编码为在左上方显示“Food, LLC”,并且在宽度缩小到769px之前所有其他链接都将被隐藏。当达到769px宽度时,汉堡包按钮出现。然后,当单击按钮时,链接会出现为下拉列表。
我使用红色作为示例的背景颜色,但可以欣赏任何颜色变化!
我尝试尽可能具体地使用navbar-toggler类来查看是否可以进行更改,但无法实现。这在Chrome上测试过。
此外,我尝试使用“:active” CSS属性,但没有成功。
@media (min-width: 769px) {
button {
display: none;
background-color: red;
}
.navbar-brand>.navbar-toggler{
background-color: red !important;
}
.navbar-toggler:active{
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-collapse-md navbar-dark bg-dark"
id="button">
<a class="navbar-brand" href="index.html">Food, LLC</a>
<button class="navbar-toggler" id="navbarToggleExternalContent
active" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse active" id="navbarNav">
<ul class="navbar-nav" id="color">
<li class="nav-item">
<a class="nav-link" href="chicken.html">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="beef.html">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sushi.html">Sushi</a>
</li>
</ul>
</div>
</nav>