Did Bootstrap navbar fix stop working?

[steve]

The Bootstrap toggle button (navbar-toggler-icon) is not showing up.

I understand these lines in _variables.scss are supposed to fix it:

$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;

I’m not getting any errors in the console and I’ve tried changing the color of the classes navbar-light and navbar-toggler, but they don’t seem to be overriding whatever the default is.

The border-color can be overwritten, though, and that is actually showing up as the color it’s supposed to be.

Am I missing something really obvious?

[ng3]

I had trouble with this, and it took a while to find the right classes to tweak. I ended up with

.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(197, 79, 31, 1.00)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler {
  background-color: white;
  border: none;
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 2000;
}

[steve]

Thanks @ng3

Are you placing that in _variables.scss?

It doesn’t seem to be working for me

[ng3]

No, I stick it in _header.scss

[steve]

I see, @ng3

That helped steer me in the right direction.

I added the following in _header.scss and it did the trick!

.custom-toggler.navbar-toggler {
  border-color: rgb(119, 136, 153);
}

.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(119, 136, 153, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

In header.blade.php, I also added .custom-toggler to the button that stores .navbar-toggler-icon:

<button class="navbar-toggler custom-toggler" type="button" ...