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/bootstrap@5.0.1/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>

Please take the [tour] for a reminder how this site works. I see that you have asked [many questions](https://stackoverflow.com/users/10023354/%c3%98yvind-isaksen?tab=questions) but only resolved one. — isherwood, Jun 22 '21 at 12:43

score 3 · Accepted Answer · answered Oct 15 '21 at 12:03

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

isherwood · Answer 2 · 2021-06-21T14:02:08.650

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/bootstrap@5.0.1/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>

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

2 Answers2

Linked