Looking to update the text color of a menu item to white, or potentially match the color of the active menu.
Below is the HTML snippet:
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-0">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="@Url.Action("Index","Employee")">Access List</a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index","Log")">Logs</a>
</li>
</ul>
</div>
</div>
</nav>
and the SCSS code used:
$main-color: $blue;
//===== Navbar =====
$active-bg-color: darken($main-color, 10%);
.navbar {
border-bottom: 1px solid darken($active-bg-color, 20%);
}
.nav-link {
&:hover {
background-color: $active-bg-color;
}
}
.navbar-dark .navbar-nav .active > .nav-link {
background-color: $active-bg-color;
}
.nav-item {
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
The attempt was made to set the color within the .nav-link section. However, this approach did not yield the desired outcome.
.nav-link {
color = white;
&:hover {
background-color: $active-bg-color;
}
}
An additional trial involved the following code, but it also did not produce the expected result.
.navbar-dark .navbar-nav > .nav-link {
color: white;
}
The current appearance of the menu is displayed in the image below, with the aim being to have consistent text color regardless of activation status. https://i.sstatic.net/LoCyw.png
Any helpful tips or suggestions are welcome!