Bootstrap 4 SCSS-更改导航栏菜单颜色？

Question

I'm trying to change the text color of a menu item to white or at least the color of my active menu.

Here is my HTML:

<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 my SCSS:

$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);
}

I assumed setting the color in the .nav-link section would make the change. I tried this but didn't work.

.nav-link {
    color = white;
    &:hover {
        background-color: $active-bg-color;
    }
}

I also tried adding this but it did not work either.

.navbar-dark .navbar-nav > .nav-link {
    color: white;
}

This is what my menu looks like. I'm trying to get the text to be the same color when active or not.

Any suggestions?

Answer 1

You need to change these SASS variable for the navbar-dark links...

$navbar-dark-color:         $white;
$navbar-dark-hover-color:   $white;

Demo: https://www.codeply.com/go/ZO83BzTPtD

Or , with CSS:

.navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
}