title: How can I make my hamburger menu button change colors once clicked?
body: <p>I am working with Bootstrap and am trying to have the basic hamburger menu button change background colors once clicked. I can make the color change within the browser when it is inspected, but cannot replicate in my css. I also cannot make the color change only when clicked on. I believe it may be a specificity problem. The hamburger button was taken from one of the bootstrap examples. </p>
  
  <p>The below navbar is coded to show "Food, LLC" in the upper left, and for all of the other links to be hidden until the width is reduced to 769px. The hamburger button appears when the 769px width is hit. The links then appear as drop downs when the button is clicked on.</p>
  
  <p>I am using a background color of red as an example, but any color change will be appreciated!</p>
  
  <p>I have tried to be as specific as possible with the navbar-toggler class to see if I can make it change, but am not able to. This is tested on chrome. </p>
  
  <p>Additionally, I have tried using the ":active" css property with no luck. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (min-width: 769px) {
   button {
      display: none;
      background-color: red;
   }
  
  .navbar-brand&gt;.navbar-toggler{
      background-color: red !important;
   }
  
   .navbar-toggler:active{
      background-color: red;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;nav class="navbar navbar-collapse-md navbar-dark bg-dark" 
  id="button"&gt;
    &lt;a class="navbar-brand" href="index.html"&gt;Food, LLC&lt;/a&gt;
    &lt;button class="navbar-toggler" id="navbarToggleExternalContent 
  active" type="button" data-toggle="collapse" data- 
  target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
  aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse active" id="navbarNav"&gt;
      &lt;ul class="navbar-nav" id="color"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="chicken.html"&gt;Chicken&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="beef.html"&gt;Beef&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="sushi.html"&gt;Sushi&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>