0

Как поменять цвет полосок в бургере?

введите сюда описание изображения

Как их поменять на белый цвет в CSS?

Вот код

<header>
        <nav class="navbar navbar-expand-lg bg-colour">
          <div class="container-fluid">
            <a class="navbar-brand"  href="index.html" ><img src="C:\Users\egord\Desktop\allproj\b5\images\logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="pricing.html">Pricing</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
    </header>

Пробовал так :

.navbar-toggler-icon {
    color: white;
}

не работает(

1

1 ответ 1

0

У navbar-toggler-icon внутри нет ни иконок ни символов. Эти полоски это картинка, которая вставлена с помощью background-image. Поэтому нужно убрать эту картинку и сделать самому эти полоски:

Верхнюю и нижнюю полоски делаем с помощью ::before и ::after. Среднюю с помощью span который добавим внутри navbar--toggler-icon

<span class="navbar-toggler-icon">
    <span></span>
</span>
.navbar-toggler-icon{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none !important;
}
.navbar-toggler-icon::before{
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    height: 2px;
    width: 100%;
    background: #000;
}
.navbar-toggler-icon::after{
    content: "";
    position: absolute;
    bottom: 5px;
    left: 0;
    height: 2px;
    width: 100%;
    background: #000;
}
.navbar-toggler-icon span{
    height: 2px;
    width: 100%;
    background: #000;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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