title: Remove border color for navbar-toggler Hamburger icon in Bootstrap using CSS
body: <p>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)</p>
  
  <p>Could anyone help fix this? Appreciate the help!</p>
  
  <p>This is my code: 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee"&gt;
    &lt;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"&gt;
      &lt;span&gt;&lt;i class="fa fa-navicon"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarToggler"&gt;
      &lt;ul class="navbar-nav ml-auto mt-2 mt-lg-0"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link active" routerLink="/about" routerLinkActive="active"&gt;
            &lt;span&gt;About&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="/projects" routerLinkActive="active"&gt;
            &lt;span&gt;Projects&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="/contact" routerLinkActive="active"&gt;
            &lt;span&gt;Contact&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"&gt;
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Popper JS --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"&gt;</code></pre>
  </div>
  </div>
  </p>