Search code examples
csstwitter-bootstrapbootstrap-4

How can I change the Bootstrap 4 navbar button icon color?

I have a Bootstrap website where the hamburger toggler is added when the screen size is less than 992px. The code is like so:

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

Is there any possibility to change the color of the hamburger toggler button?

Solution

  • The navbar-toggler-icon (hamburger) in Bootstrap 4 uses an SVG background-image. There are 2 "versions" of the toggler icon image. One for a light navbar, and one for a dark navbar...

    • Use navbar-dark for a light/white toggler on darker backgrounds
    • Use navbar-light for a dark/gray toggler on lighter backgrounds
    // 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;..");
}

    Therefore, if you want to change the color of the toggler image to something else, you can customize the icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke='rgba(255,102,203, 0.5)' value in the SVG data:

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

    Demo http://www.codeply.com/go/4FdZGlPMNV

    OFC, another option to just use an icon from another library ie: Font Awesome, etc..

    Update Bootstrap 4.0.0:

    As of Bootstrap 4 Beta, navbar-inverse is now navbar-dark to use on navbars with darker background colors to produce lighter link and toggler colors.

    How to change Bootstrap 4 Navbar colors