twitter-bootstraprazor-pageshamburger-menuoff-canvas-menu

How can I remove the dark line around my menu button?

I am creating a C# Razor project using Bootstrap 5.1.3 and a custom menu button.

Basically, I am using a custom button with an icon to open an offcanvas menu and when this menu is closed a horrid line around the button is visible. A click away (lost focus) and the button appears as should be.

An example is as follows:

Remove the dark surround (taken from Codepen)

.navbar-toggler {
  border-color: red;
}

.navbar-toggler:hover,
.navbar-toggler:active {
  border-color: green;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.348 18.684'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23e5231e;font-family:Verdana, Verdana;font-size:16.014px;%7D.c%7Bletter-spacing:0em;%7D.d%7Bletter-spacing:-.107em;%7D%3C/style%3E%3C/defs%3E%3Ctext class='b' transform='translate(0 13.829) scale(.815 1)'%3E%3Ctspan class='d' x='0' y='0'%3ET%3C/tspan%3E%3Ctspan class='c' x='8.148' y='0'%3Eest%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <nav class="navbar fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" asp-page="/Index">Test</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Test Text</h5>
          <button type="button" class="ham-x" data-bs-dismiss="offcanvas" aria-label="Close">X</button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link" asp-area="" asp-page="./Contact" title="Contact Us">Conatct Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" asp-area="" asp-page="./Privacy" title="Privacy">Privacy</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Something
              </a>
              <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
                <li><a class="dropdown-item" asp-page="./One" title="One">One</a></li>
                <li><a class="dropdown-item" asp-page="./Two" title="Two">Two</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Solution

  • Bootstrap puts a shadow on the button when it has focus. You could remove it with some CSS.

    However, that's presumably there as an accessibility feature and probably shouldn't be removed. See Accessibility: Never Remove the Outlines

    .navbar-toggler {
  border-color: red;
}

.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus {
  border-color: green;
  box-shadow: none !important; /* -----------HERE */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.348 18.684'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23e5231e;font-family:Verdana, Verdana;font-size:16.014px;%7D.c%7Bletter-spacing:0em;%7D.d%7Bletter-spacing:-.107em;%7D%3C/style%3E%3C/defs%3E%3Ctext class='b' transform='translate(0 13.829) scale(.815 1)'%3E%3Ctspan class='d' x='0' y='0'%3ET%3C/tspan%3E%3Ctspan class='c' x='8.148' y='0'%3Eest%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <nav class="navbar fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" asp-page="/Index">Test</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Test Text</h5>
          <button type="button" class="ham-x" data-bs-dismiss="offcanvas" aria-label="Close">X</button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link" asp-area="" asp-page="./Contact" title="Contact Us">Conatct Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" asp-area="" asp-page="./Privacy" title="Privacy">Privacy</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Something
              </a>
              <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
                <li><a class="dropdown-item" asp-page="./One" title="One">One</a></li>
                <li><a class="dropdown-item" asp-page="./Two" title="Two">Two</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>