Bootstrap 4, one of the nav-items in my navbar-collapse class not changing background color when it's active

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.

Here is my HTML code:

<div class="collapse navbar-collapse nav-fill w-100" id="navbarNavDropdown">
    <ul class="navbar-nav nav-fill w-100">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="allproducts.html">All Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="summer.html">Summer Essentials</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="sale.html">SALE</a>
      </li>

     <li class="nav-item active dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data- 
         toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Aisles
        </a>
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: 
      #FF6347";>
        <a class= "dropdown-item active" href="aisle1.html"><span>Fruits & Vegetables</span></a>
        <a class="dropdown-item" href="aisle2.html"><span>Dairy & Eggs</span></a>
        <a class="dropdown-item" href="aisle3.html"><span>Meat & Poultry</span></a>
        <a class="dropdown-item" href="aisle4.html"><span>Snacks</span></a>
        <a class="dropdown-item" href="aisle5.html"><span>Bread & Bakery</span></a>
        <a class="dropdown-item" href="aisle6.html"><span>Beverages</span></a>
        <a class="dropdown-item" href="aisle7.html"><span>Cleaning & Household</span></a>
        <a class="dropdown-item" href="aisle8.html"><span>Beauty</span></a>
      </div>
   </li>



</div>

Can you please help me achieve this, thanks.