У меня есть веб-сайт начальной загрузки, на котором добавляется переключатель гамбургера, когда размер экрана меньше 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 использует SVGbackground-image
. Есть 2 «версии» изображения значка переключателя. Один для светлой навигационной панели и один для темной навигационной панели ...navbar-dark
для переключения светлый / белый на темном фоне.navbar-light
для переключения темного / серого на светлом фоне.Поэтому, если вы хотите изменить цвет изображения переключателя на другой, вы можете настроить значок. Например, здесь я установил значение RGB в розовый (255,102,203). Обратите внимание на
stroke='rgba(255,102,203, 0.5)'
значение в данных SVG:Демо http://www.codeply.com/go/4FdZGlPMNV
OFC, еще один вариант просто использовать значок из другой библиотеки, например: Font Awesome и т. Д.
Обновите Bootstrap 4.0.0:
Начиная с бета-версии Bootstrap 4,
navbar-inverse
теперьnavbar-dark
можно использовать на панелях навигации с более темным цветом фона для получения более светлых цветов ссылок и переключателей.Как изменить цвета панели навигации Bootstrap 4
источник
.navbar-inverse
класса. вы можете выбрать один из двух классов:.navbar-light
или.navbar-dark
.Используйте значок с отличным шрифтом в качестве значка по умолчанию на панели навигации.
Или попробуйте это на старых версиях с отличным шрифтом:
источник
Вы можете создать кнопку переключателя с помощью css только очень простым способом, нет необходимости использовать какие-либо шрифты в SVG или ... foramt.
Ваша кнопка:
Ваш стиль кнопки:
}
Ваш стиль горизонтальной линии:
}
демонстрация
источник
просто вставьте класс
navbar-dark
илиnavbar-light
в элемент навигации:источник
Самый простой способ - заменить этот код начальной загрузки по умолчанию:
этим :
И не забудьте добавить этот код в свой файл:
Надеюсь, поможет!!
источник
Если вы скачали бутстрап, перейдите в
bootstrap-4.4.1-dist/css/bootstrap.min.css
найдите
.navbar-light .navbar-toggler-icon
или.navbar-dark .navbar-toggler-icon
селекторвыберите
background-image
атрибут и его значение. Фрагмент выглядит так:скопируйте фрагмент и вставьте его в свой собственный CSS
измените
stroke='rgba(0, 0, 0, 0.5)'
значение на желаемое значение rgbaисточник
РЕДАКТИРОВАТЬ: мой плохой! С моим ответом значок не будет вести себя как переключатель. На самом деле, он будет отображаться, даже если не свернут ... Все еще ищу ...
Это сработает:
Трюк, предложенный моим ответом, заключается в том, чтобы заменить
navbar-toggler
класс классической кнопки,btn
а затем, как уже было сказано, использовать шрифт значка.Учтите, что если оставить
<button class="navbar-toggler">
, кнопка будет иметь «странную» форму.Как сказано в этом сообщении на github , bootstrap использует некоторые «хитрости css», поэтому пользователям не нужно полагаться на шрифты.
Итак, просто не используйте
"navbar-toggler"
класс на своей кнопке, если вы хотите использовать шрифт значка.Приветствия.
источник
Я просто разработал значительно более простое решение. (Да, я знаю, что это старый вопрос, но тот, кто исследует эту же проблему, может найти его полезным.)
Я использовал SVG под названием hamburger.svg. Я посмотрел на него с помощью текстового редактора и не смог найти ничего, что устанавливало бы цвет для трех строк - я предполагаю, что по умолчанию он черный, потому что это определенно то, что я получаю - поэтому я просто добавил параметр «штрих» к определение SVG. Это НЕ сработало - границы трех линий были выбранным мной цветом (белый), но остальная часть линии все еще была черной, поэтому я также добавил параметр «заливка». И это сработало!
Вот полный код исходного файла hamburger.svg:
А вот код нового SVG после того, как я его отредактировал и сохранил как hamburger_white.svg:
Как вы можете видеть, прокрутив страницу вправо, я всего лишь добавил:
до самого конца пути. Еще мне пришлось изменить имя файла гамбургера в HTML. Не нужно возиться с CSS и искать другой значок.
Easy-peasey! Вы можете имитировать это, чтобы придать гамбургеру любой цвет, который вам нравится.
источник
Если вы работаете с sass-версией bootstrap,
_variables.scss
вы можете найти$navbar-inverse-toggler-bg
или$navbar-light-toggler-bg
изменить цвет и стиль кнопки переключения.В html вы должны использовать
navbar-inverse
или вnavbar-light
зависимости от того, какую версию вы хотите использовать.источник
В качестве альтернативы вы всегда можете попробовать более простой обходной путь, используя другой значок, например:
ссылка: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
ссылка: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp
Таким образом, вы получаете полный контроль над их цветом и размером:
( примененный стиль кнопки предназначен только для быстрого тестирования ):
источник
Значок панели навигации начальной загрузки по умолчанию
<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>
источник
Выберите лучшее решение для пользовательской навигации по гамбургерам.
демонстрационное изображение
источник