title: Bootstrap 4, one of the nav-items in my navbar-collapse class not changing background color when it's active
body: <p>I'm trying to change the background color of an active item in my dropdown menu.
  So what I'm targetting is the aisles nav-item, which has a dropdown for 8 different categories. So for example, when I'm on Fruits and Vegetables, I would like for a color surrounding that category to be fixed on it so that it indicates to the users that it's on that category.
  Right now, Bootstrap 4 applies a blue background color, but I want to change it to match my website.</p>
  <p>Here is my HTML code:</p>
  <pre><code>&lt;div class=&quot;collapse navbar-collapse nav-fill w-100&quot; id=&quot;navbarNavDropdown&quot;&gt;
      &lt;ul class=&quot;navbar-nav nav-fill w-100&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;index.html&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;allproducts.html&quot;&gt;All Products&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;summer.html&quot;&gt;Summer Essentials&lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;sale.html&quot;&gt;SALE&lt;/a&gt;
        &lt;/li&gt;
  
       &lt;li class=&quot;nav-item active dropdown&quot;&gt;
          &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdownMenuLink&quot; role=&quot;button&quot; data- 
           toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
            Aisles
          &lt;/a&gt;
       &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdownMenuLink&quot; style=&quot;background-color: 
        #FF6347&quot;;&gt;
          &lt;a class= &quot;dropdown-item active&quot; href=&quot;aisle1.html&quot;&gt;&lt;span&gt;Fruits &amp; Vegetables&lt;/span&gt;&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;aisle2.html&quot;&gt;&lt;span&gt;Dairy &amp; Eggs&lt;/span&gt;&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;aisle3.html&quot;&gt;&lt;span&gt;Meat &amp; Poultry&lt;/span&gt;&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;aisle4.html&quot;&gt;&lt;span&gt;Snacks&lt;/span&gt;&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;aisle5.html&quot;&gt;&lt;span&gt;Bread &amp; Bakery&lt;/span&gt;&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;aisle6.html&quot;&gt;&lt;span&gt;Beverages&lt;/span&gt;&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;aisle7.html&quot;&gt;&lt;span&gt;Cleaning &amp; Household&lt;/span&gt;&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;aisle8.html&quot;&gt;&lt;span&gt;Beauty&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
     &lt;/li&gt;
  
  
  
  &lt;/div&gt;
  </code></pre>
    
  <p>Can you please help me achieve this, thanks.</p>