4

Есть сайт на bootstrap 4, как можно изменить цвет этих 3 палок на белый?

Сейчас темного цвета

Вот html:

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-navbar" aria-expanded="false" aria-label="Toggle navigation" style="color: red;"><span class="navbar-toggler-icon"></span></button>

Вот CSS для responsive:

@media (min-width: 320px) and (max-width: 767px) {
ca-navbar {
        padding: 20px;
        border-radius: 3px;
/*      background-color: #CFD1D2;*/
        background: linear-gradient(to right, #007AAF, #00CBBE);      
        text-align: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
 #ca-navbar {
        padding: 30px;
        color: red;
        border-radius: 3px;
        background: linear-gradient(to right, #007ADF, #00ECBC);      
        text-align: left;
    }
}

Есть еще вот такой код через код элемента:

background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
3
  • <nav class="navbar-dark ..."> из коробки цвет будет белый, рекомендую таким образом свои цвета назначать через parent елементы bootstrap'a 18 дек 2018 в 9:47
  • @programmer403 извините, можете на примере показать?
    – asdas
    18 дек 2018 в 9:48
  • смотрите примеры на оф. сайте: getbootstrap.com/docs/4.1/examples/album там <div class="navbar navbar-dark bg-dark shadow-sm"> родительский дом для шапки и меню соответственно, navbar-dark в этом диве ничего не делает, он нужен как раз для определения цвета гамб. меню: .navbar-dark .navbar-toggler-icon 18 дек 2018 в 9:53

1 ответ 1

2

Белая кнопка (цвет в stroke):

background-image: url("data:image/svg+xml ... stroke='rgba(255, 255, 255, 1)' ....

или темная

background-image: url("data:image/svg+xml ... stroke='rgba(0, 0, 0, 1)' ....

.navbar .navbar-toggler-icon {
    opacity: 1;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); 
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

2
  • спасибо. можно еще вопрос, как можно сделать так чтобы в адапти версии сначала эти палки были черного цвета а при скролле когда выезжает меню это белыми были? Спасибо
    – asdas
    18 дек 2018 в 9:03
  • @asdas, @media запросы в помощь и у кнопки меняете background-image: url("data:image/svg+xml ... stroke='rgba(255, 255, 255, 1)' .... на background-image: url("data:image/svg+xml ... stroke='rgba(0, 0, 0, 1)' .... или наоборот 18 дек 2018 в 9:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.