Change the .navbar-toggler to default contextual .navbar-*-color.
<iframe height='265' scrolling='no' title='Bootstrap - .navbar-toggler color' src='//codepen.io/zalog/embed/MJLZOE/?height=265&theme-id=light&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/zalog/pen/MJLZOE/'>Bootstrap - .navbar-toggler color</a> by Catalin Zalog (<a href='http://codepen.io/zalog'>@zalog</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>
// Dark links against a light background
.navbar-light {
- .navbar-brand,
- .navbar-toggler {
+ .navbar-brand {
color: $navbar-light-active-color;
@include hover-focus {
}
.navbar-toggler {
+ color: $navbar-light-color;
border-color: $navbar-light-toggler-border;
}
// White links against a dark background
.navbar-inverse {
- .navbar-brand,
- .navbar-toggler {
+ .navbar-brand {
color: $navbar-inverse-active-color;
@include hover-focus {
}
.navbar-toggler {
+ color: $navbar-inverse-color;
border-color: $navbar-inverse-toggler-border;
}