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

#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
  

Как установить размер input в зависимости от ширины ячейки в таблице bootstrap

Пользуюсь бутстрапом 4. У меня есть след. таблица:

Дата	Остаток	Выкуп зол.	%	Из офиса	Залог зол.	Скупка	Остаток	Офис	Люди	Новые	Вес
	0	27050	11077	0	36850	21080	20197	0	8	15.62

Выглядит она вот так, если нету внутри td input:

Мне необходимо в каждую ячейку добавить инпут. Как только я это делаю колонка расширяется.

Вопрос: Как сделать так, что бы таблица сохранила свои размеры как на скрине 1, но при этом инпут расширялся на 100% длинны родителя.
Я пробовал применять стили типа:
td input.form-control width: 100% !important box-sizing: border-box !important
Но это не дает результата. Помогите пожалуйста решить вопрос

Ответ

Можно использовать вот такой костыль