Как изменить цвет фона значка Bootstrap Navbar Toggler Icon, когда он активен, при использовании других фреймворков, таких как Materialize? - PullRequest
Новая
       136

Как изменить цвет фона значка Bootstrap Navbar Toggler Icon, когда он активен, при использовании других фреймворков, таких как Materialize?

1 голос
/ 29 мая 2020

Я работаю над проектом, который требует как Bootstrap, так и фреймворков Materialize. У меня есть этот переключатель на панели навигации, который нормален, когда он не находится в активном состоянии.

enter image description here

Но когда он переходит в активное состояние и имеет фоновую заливку с цветами по умолчанию Materialize CSS.

enter image description here

Я пытаюсь установить прозрачный цвет фона, но это не так. Это CSS, который я пробовал. 

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

Это код ссылка .

1 Ответ

1 голос
/ 30 мая 2020

Я добавил id в div, который содержит все содержимое navbar. 

<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>

Когда я меняю цвет в id, если id находится на div все, что находится внутри div, будет изменено вместе. Поэтому я поставил его только для того, чтобы button получил изменения.

Но, я не знаю почему, кнопка остается с «ошибкой», если вы поместите :focus только на нее, поэтому я Я поставил :focus на все, и после этого я удалил :focus из a, используя для него одну спецификацию c bg. 

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...