代码之家  ›  专栏  ›  技术社区  ›  Caverman

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

  •  2
  • Caverman  · 技术社区  · 7 年前

    我正在尝试将菜单项的文本颜色更改为白色,或者至少更改活动菜单的颜色。

    这是我的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;
    }
    

    这就是我的菜单。我试图使文本在活动或不活动时保持相同的颜色。 enter image description here

    有什么建议吗?

    1 回复  |  直到 7 年前
        1
  •  3
  •   Carol Skelly    7 年前

    你需要为导航栏的暗链接更改这些SASS变量。。。

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

    演示: https://www.codeply.com/go/ZO83BzTPtD

    或者 ,使用CSS:

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