Завантажувальний 4 Змінити колір гамбургера Toggler

У мене є веб-сайт для завантаження, де додається перемикач омбре, коли розмір екрана менше 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>

Чи є можливість змінити колір кнопки тумблера омбре?

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, ще один варіант просто використовувати піктограму з іншої бібліотеки, тобто: Awesome Font тощо.

Оновити Bootstrap 4.0.0:

За станом на бета-версію Bootstrap 4 Beta navbar-inverseтепер navbar-darkвикористовується для навігації з більш темними кольорами фону для створення світліших кольорів посилання та тумблера.

Як змінити Bootstrap 4 кольорів Navbar

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

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

Ви можете створити кнопку перемикача за допомогою 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>

просто вставте клас 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>

Найпростіший спосіб - замінити цей код завантаження за замовчуванням:

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

Сподіваюся, це допомагає !!

Якщо ви завантажили bootstrap, перейдіть до bootstrap-4.4.1-dist / css / bootstrap.min

i. знайти .navbar-light .navbar-toggler-iconабо .navbar-dark .navbar-toggler-iconселектор

ii. виберіть атрибут 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");
}

iii. скопіюйте фрагмент і вставте його у свій спеціальний CSS

iv. змінити stroke=’rgba(0,0,0,0.5)’значення на бажане значення rgba

РЕДАКТ: погано! З моєю відповіддю, піктограма не поводитиметься як перемикач Насправді, вона буде відображатися навіть тоді, коли не буде згорнута ... Ще шукаю ...

Це спрацювало б:

<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"клас на вашій кнопці, якщо ви хочете використовувати шрифт піктограми.

Ура.

Я просто розробив значно простіше рішення. (Так, я знаю, що це давнє питання, але хтось, хто досліджує цю проблему, може вважати це корисним.)

Я використовував 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 і не потрібно відстежувати інший значок.

Легко піаси! Ви можете імітувати це, щоб зробити ваш гамбургер будь-якого кольору, який вам подобається.

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

У html ви повинні використовувати navbar-inverseабо navbar-lightзалежно від того, яку версію ви хочете використовувати.

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

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

( Застосований стиль кнопки - це лише швидкий тест ):

Піктограма навігації для завантаження за замовчуванням

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

Додати піктограму Awesome Font та видалити class="navbar-toggler-icon"

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

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

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

демо-зображення