У меня есть веб-сайт Bootstrap, на котором добавляется гамбургер-переключатель, когда размер экрана меньше 992 пикселей. Код такой:


Есть ли возможность изменить цвет кнопки тогглера гамбургера?

Rehan

Ответы (15)

Значок navbar-toggler-icon (гамбургер) в Bootstrap 4 использует SVG фоновое изображение. Есть 2 «версии» изображения значка переключателя. Один для светлой навигационной панели и один для темной навигационной панели ...

  • Используйте navbar-dark для переключения света / белого на темном фоне
  • Используйте navbar-light для переключения темного / серого на более светлом фоне

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

Следовательно, если вы хотите изменить цвет изображения переключателя на что-то другое, вы можете настроить значок. Например, здесь я установил значение RGB на розовый (255,102,203). Обратите внимание на значение stroke = 'rgba (255,102,203, 0.5)' в данных SVG:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

Демо http://www.codeply.com/go/4FdZGlPMNV

OFC, еще одна возможность просто использовать значок из другой библиотеки, например: Font Awesome и т. Д.


Обновить Bootstrap 4.0.0:

Начиная с Bootstrap 4 Beta, navbar-inverse теперь navbar-dark для использования на панелях навигации с более темными цветами фона для создания более светлых цветов ссылок и переключателей.


Как изменить цвета панели навигации Bootstrap 4

EDIT : my bad! With my answer, the icon won't behave as a toggler Actually, it will be shown even when not collapsed... Still searching...

Это будет работать:


Уловка, предложенная моим ответом, состоит в том, чтобы заменить navbar-toggler классическим классом кнопок btn, а затем, как было сказано ранее, использовать иконочный шрифт.

Обратите внимание, что если оставить

Значок навигационной панели начальной загрузки по умолчанию

Добавить и удалить значок Font Awesome class = "navbar-toggler-icon"

Я только что разработал значительно более простое решение. (Да, я знаю, что это старый вопрос, но тот, кто исследует ту же проблему, может найти его полезным.)

Я использовал SVG под названием hamburger.svg. Я посмотрел на него с помощью текстового редактора и не смог найти ничего, что устанавливало бы цвет для трех строк - я предполагаю, что по умолчанию он черный, потому что это определенно то, что я получаю - поэтому я просто добавил параметр «штрих» к определение SVG. Это НЕ сработало - границы трех линий были выбранным мной цветом (белый), но остальная часть линии все еще была черной, поэтому я также добавил параметр «заливка». И это помогло!

Вот код исходного файла hamburger.svg целиком:


А вот код нового SVG после того, как я его отредактировал и сохранил как hamburger_white.svg:


Как вы можете видеть, прокручивая вправо, все, что я сделал, это добавил:

stroke="white" fill="white"

до самого конца пути. Еще мне пришлось изменить имя файла гамбургера в HTML. Не нужно возиться с CSS и искать другой значок.

Полегче! Вы можете имитировать это, чтобы придать гамбургеру любой цвет, который вам нравится.

Вы можете создать кнопку переключения с помощью css только очень простым способом, нет необходимости использовать какие-либо шрифты в SVG или ... foramt.

Ваша кнопка:


Ваш стиль кнопки:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

Стиль вашей горизонтальной линии:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

Демо

.navbar-toggler {
    ширина: 47 пикселей;
    высота: 34 пикс;
    цвет фона: # 7eb444;
    граница: нет;
}
.navbar-toggler .line {
    ширина: 100%;
    плыть налево;
    высота: 2 пикселя;
    цвет фона: #fff;
    нижнее поле: 5 пикселей;
}

Да, просто удалите этот промежуток из вашего кода: , затем вставьте этот замечательный значок шрифта, который называется барами: < i class = "fas fa-bars"> , добавьте класс к этому значку, затем укажите любой цвет, который хотите.

Затем, второй шаг - скрыть этот значок от устройств с шириной более 992px (ширина рабочего стола), потому что этот значок будет отображаться в вашем интерфейсе на любом устройстве, если вы этого не сделаете. добавьте это @ media в свой код css:

 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* the class you gave of the bars icon ↑ */
    .iconClass{
        display: none;
    }
    /* the bootstrap toogler button class */
    .navbar-toggler{
        display: none;
    }
}

Это сработало и для меня, и мне это показалось очень простым.

Попробуйте поменять в своем SCSS: $ navbar-dark-color: #abcdef; / * <- вот ваш цвет * / или $ navbar-light-color: #abcdef;, если вы используете свет.

просто вставьте класс navbar-dark или navbar-light в элемент nav:


Если вы работаете с sass-версией начальной загрузки в _variables.scss, вы можете найти $ navbar-inverse-toggler-bgили $ navbar-light-toggler-bg, где вы можете изменить цвет и стиль переключателя.

В html вы должны использовать navbar-inverse или navbar-light в зависимости от того, какую версию вы хотите использовать.

Если вы скачали bootstrap, перейдите в bootstrap-4.4.1-dist / css / bootstrap.min.css

  1. найдите .navbar-light .navbar-toggler-icon или .navbar-dark .navbar-toggler-icon селектор

  2. выберите атрибут background-image и его значение. Фрагмент выглядит так:

    .navbar-light .navbar-toggler-icon {
         background-image: url ("data: image / svg + xml,% 3csvg xmlns = 'http://www.w3.org/2000/svg' width = '30 'height = '30' viewBox = '0 0 30 30'% 3e% 3cpath stroke = 'rgba (0, 0, 0, 0.5) 'stroke-linecap =' round 'stroke-miterlimit = '10' stroke-width = '2' d = 'M4 7h22M4 15h22M4 23h22' /% 3e% 3c / svg% 3e ") ;
    }
    
  3. скопируйте фрагмент и вставьте его в свой собственный CSS

  4. измените значение stroke = 'rgba (0, 0, 0, 0.5)' на желаемое значение rgba

Самый простой способ столкнуться с этим - использовать font awesome, например

 

Тогда вы можете изменить элемент i так же, как и любой другой элемент i.

Самый простой способ - заменить этот код начальной загрузки по умолчанию:


следующим образом:


И не забудьте добавить этот код также в свой файл:

 

Надеюсь, это поможет !!

Выберите лучшее решение для пользовательской навигации по гамбургерам.

@ import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  фон: # f0323d;
  / * Старые браузеры * /
  фон: -moz-linear-gradient (вверху, # f0323d 0%, # e6366c 100%);
  / * FF3.6-15 * /
  фон: -webkit-linear-gradient (сверху, # f0323d 0%, # e6366c 100%);
  / * Chrome10-25, Safari5.1-6 * /
  фон: linear-gradient (вниз, # f0323d 0%, # e6366c 100%);
  / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * /
  фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# f0323d', endColorstr = '# e6366c', GradientType = 0);
  / * IE6-9 * /
  радиус границы: 0;
  отступ: 10 пикселей;
}

.navbar-toggler-icon {
  background-image: url ("data: image / svg + xml; charset = utf8,% 3Csvg viewBox = '0 0 32 32' 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 8h24M4 16h24M4 24h24 '/% 3E% 3C / svg% 3E ");
}

демонстрационное изображение

Используйте значок с отличным шрифтом в качестве значка по умолчанию для вашей панели навигации.


     

Или попробуйте это на старых версиях с отличным шрифтом:

   
    

В качестве альтернативы вы всегда можете попробовать более простой обходной путь, используя другой значок, например:


исх .: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp


исх .: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

Таким образом, вы получаете полный контроль над их цветом и размером:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

enter image description here

(стиль кнопки применен только для быстрой проверки):

2022 WebDevInsider