I am a beginner in using bootstrap and I'm struggling to customize the CSS to my preferences. One issue I encountered is with a dropdown menu in my header where I managed to change the colors successfully. However, when the dropdown menu is selected, the font color remains unchanged. How can I adjust this? I attempted to use the following CSS code:
.dropdown-toggle:active, .open .dropdown-toggle {
background:#ffffff !important;
color:#7dc623 !important;
}<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
</div>
</li>
</ul>
</div>
</nav>The background appears green but the text remains black, while it should be white.