CODEWITHSUNDEEP
htmlcssbootstrap-4navbar
krsna
krsna

Reputation: 4353

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

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

Upvotes: 28

Views: 46196

Answers (11)

Brebber
Brebber

Reputation: 3084

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 want 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 additional answer to the original question.

Upvotes: 2

Hansana Prabath
Hansana Prabath

Reputation: 151

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

Upvotes: 0

Piotr Szcześniak
Piotr Szcześniak

Reputation: 67

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

Upvotes: 5

Paritosh
Paritosh

Reputation: 11

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

Upvotes: 1

Shay
Shay

Reputation: 2605

For Bootstrap v5.1.3:

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

Upvotes: 3

riLex
riLex

Reputation: 1

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

Upvotes: 0

Sunil Kumar
Sunil Kumar

Reputation: 17

.navbar-toggler {
    border:0px;
}

This worked for me

Upvotes: 1

Vishal Basumatary
Vishal Basumatary

Reputation: 138

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

Upvotes: 7

Mitch
Mitch

Reputation: 704

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.

Upvotes: 63

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

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

Upvotes: 5

billy.farroll
billy.farroll

Reputation: 1921

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;

}

Upvotes: 5

Related Questions