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">

score 60 · Accepted Answer · edited Apr 02 '20 at 10:33

60

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.

edited Apr 02 '20 at 10:33

KayakinKoder

3,243
3
23
37

answered Jul 27 '18 at 18:26

Mitch

664
6
10

Its basically rendered by Browser default outline style :focus { outline: -webkit-focus-ring-color auto 5px; } The above solution works! – Sameer Kumar Choudhary May 14 '19 at 10:21
Thanks! Works on Bootstrap 5.3 – Riki Jun 14 '23 at 14:40

score 7 · Answer 2 · answered Apr 06 '20 at 11:43

7

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

answered Apr 06 '20 at 11:43

Vishal Basumatary

131
2
7

score 5 · Answer 3 · answered Jun 03 '18 at 16:40

5

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;

}

answered Jun 03 '18 at 16:40

billy.farroll

1,903
2
15
23

2

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! – coderpc Jun 03 '18 at 16:52

score 5 · Answer 4 · answered Jun 03 '18 at 16:49

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">

score 5 · Answer 5 · answered Jan 20 '22 at 09:32

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

answered Jan 20 '22 at 09:32

Piotr Szcześniak

51
1
3

score 3 · Answer 6 · answered Oct 30 '21 at 06:42

3

For Bootstrap v5.1.3:

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

answered Oct 30 '21 at 06:42

Shay

2,595
3
25
35

score 2 · Answer 7 · answered May 27 '23 at 09:23

A Solution for BS5:

There is no need to overwrite BS with additional css-classes. The official way is to customize Bootstrap itself. For actual Bootstrap 5.2.3 there are two possibility to do that:

(1) If Bootstrap is generated by SASS change following settings variables to following values:

$navbar-toggler-padding-y:          0;
$navbar-toggler-padding-x:          0;
$navbar-toggler-font-size:          1.5rem;
$navbar-toggler-border-radius:      0;
$navbar-toggler-focus-width:        0;
$navbar-toggler-transition:         none;

$navbar-light-toggler-border-color: none;
$navbar-dark-toggler-border-color:  none;

Link to the Bootstrap Page about how to customize the framework by SASS variables https://getbootstrap.com/docs/5.2/customize/sass/

Note: Customizing Bootstrap by SASS has been possible in BS4 as well. But the variables could be different.

(2) If you don't work with SASS but with the static Bootstrap files you are able customize Bootstrap by customizing the BS-Setting-CSS-Variables:

Create a Bootstrap-CSS-Settings-File and include it AFTER the static Bootstrap-CSS-File to your HTML-Page. Add the variables you whant to redefine here. Example for this case you have to advice the variables for the special element class:

.navbar {
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-font-size: 1.5rem;
  --bs-navbar-toggler-border-color: none;
  --bs-navbar-toggler-border-radius: 0;
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-transition: none;
  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
}
.navbar-dark {
  --bs-navbar-toggler-border-color: none;
}

NOTE: Customizing Bootstrap by CSS-Variables on a higher level has been introduced in BS5. The variables changed during different Sub-Versions. The shown Variables are working in 5.2.3

The Question was about BS4. The solution for BS5 has been added, because the search engines shows this answer even the searching was about BS5. It is an additonal answer to the original question.

score 1 · Answer 8 · answered Jul 20 '20 at 16:33

1

.navbar-toggler {
    border:0px;
}

This worked for me

answered Jul 20 '20 at 16:33

Sunil Kumar

17
6

score 1 · Answer 9 · answered Dec 11 '21 at 18:12

1

Try this one! It worked for me.

.navbar-dark .navbar-toggler {
color: rgba(255, 255, 255, 0) !important;
border-color: rgba(255, 255, 255, 0) !important;
}

answered Dec 11 '21 at 18:12

Paritosh

11
1

1

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](/help/how-to-answer). – Community Dec 11 '21 at 20:56

score 0 · Answer 10 · edited Apr 03 '21 at 12:08

0

button:focus {
    outline: none;
    outline: none -webkit-focus-ring-color;
}

edited Apr 03 '21 at 12:08

SwissCodeMen

4,222
8
24
34

answered Dec 12 '20 at 10:00

riLex

1

score 0 · Answer 11 · answered May 20 '23 at 09:45

Here is the solution that I came with SCSS (Sass) :

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

  .navbar-toggler-icon {
    background-image: none;
    
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }

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

11 Answers11

Linked