как изменить цвет гамбургера в мобильной версии

#html #css #responsive #bootstrap4

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



Вот html:

 


Вот 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);

    

Ответы

Ответ 1

Белая кнопка (цвет в 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"); 
    }



  Navbar