时间戳

首页 > 解决方案 > 使用其他框架（如 Materialise）时，如何在 Bootstrap Navbar Toggler Icon 处于活动状态时更改其背景颜色？

css - 使用其他框架（如 Materialise）时，如何在 Bootstrap Navbar Toggler Icon 处于活动状态时更改其背景颜色？

问题描述

我正在做一个需要 Bootstrap 和 Materialize 框架的项目。我有这个导航栏切换，当不处于活动状态时这是正常的。

在此处输入图像描述

但是当它进入活动状态并使用 Materialize CSS 的默认颜色填充背景时。

在此处输入图像描述

我正在尝试将背景颜色设置为透明，但事实并非如此。这是我尝试过的 CSS。

.navbar-toggler-icon{
  background-color: transparent !important;
}
.navbar-toggler-icon :active{
  background-color: transparent !important;
}

这是 codepen链接。

标签： cssbootstrap-4togglenavbarmaterialize

解决方案

I've added an idin the div that has all the content of thenavbar.

<body>
  <div class="navbar navbar-dark navbar-expand-lg sticky-top w-100" >
            <div id="color" class="container p-2">
                <a class="navbar-brand font-weight-bold text-white mx-5 d-none d-sm-block" href="#">ReEvent</a>
                <button  class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span  class="navbar-toggler-icon"></span>
                  </div>
  </div>
    </body>

When I change the color in an id if the id is on the div everything that is inside the div will be change together. So I put it just for the button receive the changes.

But, I don't know why, the button keeps with the "bug" if you put the :focus just on it, so i've put the :focus on everything and after this I've removed the :focus of the a using one specific bg for him.

body{
  background-color: #222;
}
.navbar-toggler-icon{
  background-color: transparent !important;
}
#color button :hover, #color :focus, #color button :active{
  background-color: transparent !important;
}

#color a :focus {
  background-color: white !important;
}

推荐阅读