Изменить цвет значка (☰) в бутстрапе

Я хочу изменить цвет..

HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
  <span class="sr-only">Toggle menu navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Я пробовал разные вещи (смотрите ниже), но ничего не работает.

CSS

.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}

Ответ 1

Причина, по которой ваш CSS не работает, связана с specificity. Селектор Bootstrap имеет более высокую специфичность, чем ваш, поэтому ваш стиль полностью игнорируется.

Bootstrap стилирует это с помощью селектора: .navbar-default .navbar-toggle .icon-bar. Этот селектор имеет значение B-специфичности 3, тогда как у вас есть только значение специфичности B: 1.

Поэтому, чтобы переопределить это, просто используйте один и тот же селектор в своем CSS (если ваш CSS включен после Bootstrap's):

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

Ответ 2

Попробуйте преодолеть CSS с помощью !important

как это

.icon-bar {
   background-color:#FF0000 !important;
}

Ответ 3

Достаточно одной строки кодирования. Просто попробуйте это. и вы можете настроить даже толщину значка с помощью добавления пикселей.

HTML

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><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="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
  </a></div>

CSS

    .navbar-toggle, .icon-bar {
    border:1px solid orange;
}

БУМ...

Ответ 4

Я использую Bootstrap и HTML5. Я хотел переопределить внешний вид кнопки переключения.

.navbar-toggle{
    background-color: #5DADB0;
    color: #F3DBAA;
    border:none;        
}

.navbar-toggle.but-menu:link {
    color: #F00;
    background-color: #CF995F;
}

.navbar-toggle.but-menu:visited {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
    color: #FFF0C9;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
    color: #FFF;
    background-color: #CF995F;
}

Ответ 5

Я не знаю, если вы все еще ищете ответ на эту проблему, но сегодня я столкнулся с той же проблемой и решил ее. Вы должны указать в HTML-коде,

**<Div class = "navbar"**>
         div class = "container">
               <Div class = "navbar-header">

или

**<Div class = "navbar navbar-default">**
        div class = "container">
               <Div class = "navbar-header">

Вы получили это место в своем CSS

.navbar-default-toggle .navbar .icon-bar {
  background-color: # 0000ff;
}

и то, что я сделал, было добавлено выше

.navbar .navbar-toggle .icon-bar {
  background-color: # ff0000;
}

Поскольку мой html-код

**<Div class = "navbar">**
         div class = "container">
               <Div class = "navbar-header">

и если вы связываете файл less/css

выполните поиск в этом разделе, а также разместите цвет, который хотите изменить, в противном случае он будет самокорректировать файл css до состояния, которое было до

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-default-toggle-icon-bar-bg: # 888;**
@ Navbar-default-toggle-border-color: #ddd;

если ваш html-код похож на мой и не навигация по умолчанию, добавьте его так же, как и с css.

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-toggle-icon-bar-bg : #888;**
@ Navbar-default-toggle-icon-bar-bg: # 888;
@ Navbar-default-toggle-border-color: #ddd;

удача

Ответ 6

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

Поэтому для вас это должно выглядеть примерно так:

<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>