I'm fairly new to working with Bootstrap and I am attempting to adjust the color of the opened dropdown-toggle. In the image below, you can see that the text for "Services" in the dropdown-toggle remains white when clicked and opened, but I would like it to be beige instead. I have tried various css pseudo-classes such as active, focus, etc. but none seem to work.
https://i.sstatic.net/p6D8a.jpg
Here is the code:
<!--Collapsing sidebar-->
<div class="collapse" id="sidebar">
<div class="navbar-nav ml-auto">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">About Us <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item my-2">
<a class="nav-link" href="index.html">Portfolio<span class="sr-only"></span></a>
</li>
<li class="nav-item my-2 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="utilitiesDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" id="dropdown-menu-sidebar" aria-labelledby="utilitiesDropdown">
<h6 class="dropdown-item my-1" href="#">Link 1</h6>
<div class="dropdown-divider"></div>
</div>
</li>
<li class="nav-item my-2 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="utilitiesDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pricing
</a>
<div class="dropdown-menu" aria-labelledby="utilitiesDropdown">
<h6 class="dropdown-item" href="#">Content & Components</h6>
<div class="dropdown-divider"></div>
</div>
</li>
<li class="nav-item my-2"><a class="nav-link" href="index.html">Order Now<span class="sr-only"></span></a></li>
<li class="nav-item my-2"><a class="nav-link" href="index.html">Contact<span class="sr-only"></span></a></li>
</ul>
</div>
</div>Any suggestions on how to change the text color of the dropdown-toggle when the dropdown is open? Thank you!