CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Korpin
Korpin

Reputation: 325

Bootstrap 4 - Change the background color of the active class

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>

Upvotes: 0

Views: 1913

Answers (1)

ZombieChowder
ZombieChowder

Reputation: 1204

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.

Upvotes: 1

Related Questions