Remove border color for navbar-toggler Hamburger icon in Bootstrap using CSS

Question

I've been stuck in this for a long time. Searched and tried many ways to remove the border color for the BS4 hamburger icon when clicked on it (in my local, it appears as Yellow. In this snippet, It's blue)

Could anyone help fix this? Appreciate the help!

This is my code:

<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
  <button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="fa fa-navicon"></i></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link active" routerLink="/about" routerLinkActive="active">
          <span>About</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/projects" routerLinkActive="active">
          <span>Projects</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact" routerLinkActive="active">
          <span>Contact</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Solution 1

this worked for me in Bootstrap 4.

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

Please note: the outline is there for an important reason, accessibility! Especially for folks that can't use a mouse or who have a visual impairment. Please see http://www.outlinenone.com/ and consider adding some other style to the toggler when it is active/focused.

Solution 2

Actuallly for Bootstrap, they dont use border for the nav focus they use outline

You can remove it width:

button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus {
    outline: none!important;
}

Hope this help :>

button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus {
    outline: none!important;
}

<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
  <button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="fa fa-navicon"></i></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link active" routerLink="/about" routerLinkActive="active">
          <span>About</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/projects" routerLinkActive="active">
          <span>Projects</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact" routerLinkActive="active">
          <span>Contact</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Solution 3

To change or remove the border color when clicking on the burger icon for the Bootstrap navbar icon. You need to go into the bootstrap.min.css file and go to the button:focus class. Change it there or remove the outline completely. Like so:

button:focus {

outline: 1px dotted;
outline: 5px auto -webkit-focusring-color;

}

Solution 4

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

Solution 5

As of Bootstrap v5.1.3 this works for me:

.navbar-toggler {
  border: none;
  outline: none;

   &:focus,
   &:active,
   &-icon:focus {
     outline: none;
     box-shadow: none;
   }
}

View more solutions

Comments

[coderpc]

Glad it helped. But instead of changing it in the bootstrap.min.css I applied that style to that specific toggler-icon as this: button.navbar-toggler:focus { outline: 1px none; } That worked!

[Sameer Kumar Choudhary]

Its basically rendered by Browser default outline style :focus { outline: -webkit-focus-ring-color auto 5px; } The above solution works!

[Sith2021]

Remember me buy you a beer

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.