I am currently attempting to modify the background-color of the active Bootstrap class, but I am facing some difficulties.
To do this, I have created a separate CSS file named custom.css and have tried various approaches such as:
.navbar-dark .nav-item.active .nav-link,
.navbar-dark .nav-item .nav-link:active,
.navbar-dark .nav-item .nav-link:focus,
.navbar-dark .nav-item:hover .nav-link {
color: #00B159;
}
.navbar .nav-item.active .nav-link,
.navbar .nav-item .nav-link:active,
.navbar .nav-item .nav-link:focus,
.navbar .nav-item:hover .nav-link {
color: #00B159;
}
.active {
background: rgba(165, 168, 168, 0.329);
}
Unfortunately, none of these solutions seem to be working at the moment :)
To set the active class using ViewBag (which is successfully displaying the active page in blank), I have used the following script:
<script>
$(document).ready(function () {
if (@ViewBag.ActiveMenu != null) {
$('#' + '@ViewBag.ActiveMenu').addClass('active');
};
});
</script>
Below is the complete code for the navigation structure:
<nav class="navbar navbar-expand-sm navbar-dark fixed-top" style="background-color:#5AC5F1">
<div class="container">
<a class="navbar-brand" href="/Home/Index">
<img src="/images/logo_header.png" height="40" width="40">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav text-center">
@if (@HttpContextAccessor.HttpContext.Session.GetString("isAuth") == "true")
{
<li class="nav-link" id="MyProfile">
@Html.ActionLink("My Profile", "Index", "Contacts", null, new { @class = "nav-link" })
</li>
<li class="nav-link" id="EventHistory">
@Html.ActionLink("Registration History", "Index", "History", null, new { @class = "nav-link" })
</li>
<li class="nav-link" id="Registration">
@Html.ActionLink("New Registration", "Index", "Registration", null, new { @class = "nav-link" })
</li>
}
</ul>
<div class="dropdown-divider"></div>
<partial name="_LoginPartial" />
</div>
</div>
</nav>