Bootstrap 4 Изменение цвета переключателя гамбургеров

126

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

<button class="navbar-toggler navbar-toggler-right" 
        type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" 
        aria-expanded="false" 
        aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button>

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

css  twitter-bootstrap  bootstrap-4 
— Rehan
источник
2
Код не запускается, как в bootply
— Jordan.JD 03
Не совсем ответ, но вы можете поиграть со значком navbar-toggler-icon на advertentiekracht.nl/togglerIcon.html. Значок- переключателя начальной загрузки используется в качестве внешнего элемента стиля вместо ссылки на таблицу стилей начальной загрузки. Также объясняется, как с этим справиться.
— Бен Тийссен,

Ответы:

245

navbar-toggler-icon(Гамбургеры) в Bootstrap 4 использует SVG background-image. Есть 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, navbar-inverseтеперь navbar-darkможно использовать на панелях навигации с более темным цветом фона для получения более светлых цветов ссылок и переключателей.

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

— Zim
источник
2
В Bootstrap 4 beta 1 нет .navbar-inverseкласса. вы можете выбрать один из двух классов: .navbar-lightили .navbar-dark.
— Qrzysio
55

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

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

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

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
— Амирреза Мохаммади
источник
3
Для fontawesome 5 используйте полосы. fontawesome.com/icons/bars?style=solid
— Муртаза Бургри
7

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

Ваша кнопка:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

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

.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{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}
<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>
Развернуть фрагмент

— Гафор Сабури
источник
6

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

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
— Тай Ан Нгуен
источник
4

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

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

этим :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

— Пратик Гупта
источник
4

Если вы скачали бутстрап, перейдите в 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

— Eyoab
источник
2

РЕДАКТИРОВАТЬ: мой плохой! С моим ответом значок не будет вести себя как переключатель. На самом деле, он будет отображаться, даже если не свернут ... Все еще ищу ...

Это сработает:

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

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

Учтите, что если оставить <button class="navbar-toggler">, кнопка будет иметь «странную» форму.

Как сказано в этом сообщении на github , bootstrap использует некоторые «хитрости css», поэтому пользователям не нужно полагаться на шрифты.

Итак, просто не используйте "navbar-toggler"класс на своей кнопке, если вы хотите использовать шрифт значка.

Приветствия.

— stockersky
источник
Это «работает» только в том случае, если вы используете Font Awesome, который не является частью Bootstrap
— Зим
Думаю, вам нужно удалить комментарий к ответу Амирреза Мохаммади вверх по списку. Спасибо.
— NoChance
2

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

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

Вот полный код исходного файла hamburger.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

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

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

Как вы можете видеть, прокрутив страницу вправо, я всего лишь добавил: 

stroke="white" fill="white"

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

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

— Генри
источник
1

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

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

— nedeco
источник
не работает в bootstrap 4 в отношении navbar-light
— бот-бот
1

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

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

ссылка: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp 

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

ссылка: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

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

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

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

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

— Игорь Парра
источник
1

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

<span class="navbar-toggler-icon"></span>

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

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

— Md. Rana
источник
0

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

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.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");
}
<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>
Развернуть фрагмент

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

— хабибулла хан
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.