As I style the navbar in Bootstrap 4, I encounter an issue with dropdown items. Specifically, when I apply the 'active' class to highlight a dropdown item, all sub-items (children) end up with the same highlighting effect. This results in an unappealing appearance.
In the provided example, I am seeking a solution where 'Link dd1' and 'Link dd2' do not receive the highlight intended for the parent menu item.
If anyone has insights on how to only highlight the parent menu item without affecting the sub-items, I would greatly appreciate it.
View the code sample on Fiddle
Code:
<style>
#x .active a{color:yellow ; background-color:brown;}
</style>
<nav id="x" class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
<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>
<!-- Dropdown -->
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link dd1</a>
<a class="dropdown-item" href="#">Link dd2</a>
</div>
</li>
</ul>
</nav>
<br>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>