我正在尝试将菜单项的文本颜色更改为白色,或者至少更改活动菜单的颜色。
这是我的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>
$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);
}
我以为在.nav link部分设置颜色会做出改变。我试过但没成功。
.nav-link {
color = white;
&:hover {
background-color: $active-bg-color;
}
}
我也试着加上这个,但也没用。
.navbar-dark .navbar-nav > .nav-link {
color: white;
}
这就是我的菜单。我试图使文本在活动或不活动时保持相同的颜色。
有什么建议吗?