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:
.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>- How to put scroll bar only for modal-body?
- styling a table with multiple rows inside the <TD>
- Override bootstrap side gaps on page for div
- Table with rounded border using CSS
- Remove the outline from Bootstrap 5 accordion buttons
- Bootstrap dropdowns menus appearing behind other elements
- How to show bootstrap range's min max value before and after range slider?
- Bootstrap 5 toggle d-none for many elements
- Mixing less and sass files in Angular application
- Embedded pdf in Bootstrap not full height
- Adding margins between Bootstrap columns
- Bootstrap 4: How to inline text supposed to be hidden on small screens?
- Make bootstrap modal draggable and keep background usable
- Bootstrap 4 horizontal text alignment is not working in <span>
- Using SplideJS arrows outside of splide
- How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
- How to make a bootstrap input field "transparent"
- Bootstrap accordion, scroll to top of active (open) accordion on click?
- Align button with input forms with labels
- Open Bootstrap Modal from code-behind
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- Adjust navbar minimum height depending on screen width
- Bootstrap 5 accordion: remove rounded corners
- Less does not compile files with Twitter Bootstrap
- Justified button groups not rendering properly in Bootstrap 3 modal
- How to put some space between elements when bootstrap grid collapse?
- How can I make Bootstrap 4 columns all the same height?
- How to enable Bootstrap popovers only for certain (large) breakpoints?
- Bootstrap 5 tooltip placement top issue when page has a scroll
- Reset row_class or assign a different value instead of adding a new one