How an I change the Bootstrap 5 navbar button border and icon color?

Question

I need to use custom colors (#760822) on the Bootstrap 5 navbar menu button.

<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle">
            <span class="navbar-toggler-icon"></span>
        </button>
        .
        .
        .
    </div>
</nav>

I have achieved to update the default border-color to #760822 by doing this:

.navbar-light .navbar-toggler {
    border-color: #760822;
}

Does anyone know how to change the fat border color when the menu is clicked, and how to change the color of the 3 horizontal lines inside it?

.navbar-light .navbar-toggler {
  border-color: #760822;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle">
                <span class="navbar-toggler-icon"></span>
            </button>
  </div>
</nav>

Answer 1

On bootstrap 5, the thick border is due to the following CSS class, and specifically to the box-shadow style:

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem;
}

Without changing the original Bootstrap class, I have overridden it as follows, in my custom CSS file, that I load after the bootstrap CSS file:

.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}

Answer 2

You just need a more specific selector. This could be because you're loading your custom styles before Bootstrap's stylesheet. Often adding body to the front does the trick, but reversing load order may also resolve the issue.

Because the icon is an SVG file it can't be simply changed via CSS. You'd need to switch to a Font Awesome icon, for example, and style that with the color property. See How can I change the Bootstrap 4 navbar button icon color?.

body .navbar-light .navbar-toggler {
  color: #760822;
  border-color: #760822;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
      data-bs-target="#navbarMenu" aria-controls="navbarMenu" 
      aria-expanded="false" aria-label="Toggle">
        <i class="fas fa-bars"></i>
    </button>
  </div>
</nav>