Remove border color for navbar-toggler Hamburger icon - Bootstrap 4

html css bootstrap-4 navbar
coderpc picture coderpc · Jun 3, 2018 · Viewed 14.9k times · Source

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:

Answer

Mitra picture Mitra · Jul 27, 2018

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.

Related questions

Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More
what do css classes like my-2, my-lg-0, mr-sm-2 do in bootstrap 4?

I have looked at other questions and the bootstrap documentation and cant seem to find out what these classes do to elements. Any help is appreciated! Im just trying to make my search bar be 1/4th the size on a …

Read More
Vertical Align Center in Bootstrap 4

I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated. I have built it at Codepen.io so you guys can play with it …

Read More