0

I'm simply trying to change the background-color of the active Bootstrap's class but its not working atm.

For that, i've a second .css who's named custom.css and i've tried many things, 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);
}

But sadly, nothing is working :D

I'm using a ViewBag to make the addClas active (it's working great since the active page is displayed in blank) :

<script>
    $(document).ready(function () {

        if (@ViewBag.ActiveMenu != null) {
            $('#' + '@ViewBag.ActiveMenu').addClass('active');
        };
    });
</script>

Here's the full nav's code :

<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>
Korpin
  • 323
  • 6
  • 24
  • can you provide a JS Fiddle? Should be way easier to solve it then. – ZombieChowder Nov 10 '19 at 23:34
  • Well when I make it on Fiddle it works >.> My problem is that it seems the browser doesn't consider my overrided css file with the .active in it. – Korpin Nov 10 '19 at 23:42

1 Answers1

1

Import you CSS file after the imported bootstrap one. The last css file overrides the main one.

So you said your files are written like this:

<link href="~/css/bootstrap1.css" type="text/css" rel="stylesheet" /> 
<link href="~/css/custom.css" type="text/css" rel="stylesheet" />

I think that reading this SO answer will help you understand how css files take priority.

Also this answer discusses how cache works on Chrome. You can just disable it for less inconvenience.

ZombieChowder
  • 1,187
  • 12
  • 36