Bootstrap 4 Изменение цвета тумблера гамбургера

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

<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>

Есть ли возможность изменить цвет кнопки HamBurger?

Ответы

Ответ 1

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

Используйте 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 чтобы использовать его на navbars с более темными цветами фона для получения более светлых ссылок и переключающих цветов.

Как изменить цвета Bootstrap 4 Navbar

Ответ 2

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

<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

Если я хочу использовать Font Awesome для замены Bootstrap v4.0.navbar-toggler-icon, я бы просто вставлял код значка в элементы? Вот так:

<span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>

или просто по себе?

<button ...><i class="fa fa-bars" aria-hidden="true"></i></button>

Ответ 4

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

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

<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 а затем, как уже было btn ранее, использовать btn шрифт.

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

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

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

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

Ответ 5

Вы можете создать кнопку переключения с помощью 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

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

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

Ответ 7

Работает также с [email protected]

Попробуйте это, его работающая 100% попытается изменить stroke = 'rgba (184, 153, 129, 0.5)' и перейти первым bootstrap.min.css

найти этот css .navbar-dark .navbar-toggler-icon { 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(184, 153, 129, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") }

попробуйте изменить stroke='rgba(184, 153, 129, 0.5)'

Ответ 8

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

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Ответ 9

.custom-toggler.navbar-toggler-icon {background-image: url ("data: image/svg + xml; charset = utf8,...

https://www.codeply.com/go/n8TxnQYuUv/bootstrap-4-custom-navbar-toggler-icon-color

Этот трюк, упомянутый выше, кажется, работает нормально, но если вы посмотрите внимательно, верхняя полоса и нижняя полоска размыты. Как сделать их острыми и чистыми?

Редактировать: вам нужно изменить свойства окна просмотра на viewBox = '0 0 30 30'

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(50, 50, 50, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

Ответ 10

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

<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;
}

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

Ответ 11

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

@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>