如何更改导航栏中活动下拉菜单的颜色答案

【问题标题】：How to change the color of an active dropdown in a navbar如何更改导航栏中活动下拉菜单的颜色
【发布时间】：2019-08-12 21:28:22
【问题描述】：

当我点击下拉菜单时，它总是以蓝色突出显示。如何使用 Bootstrap 或更改我的 CSS 来解决此问题？

使用这个 CSS 元素我已经尝试过改变颜色：

.dropdown-item.active, .dropdown-item:active
 color: red
 background-color: darkviolet

HTML：

<nav class="nav-justified navbar-expand-xl navbar-light">
        <div class="" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto nav-pills nav-fill">
            <li class="nav-item active">
              <a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="überuns.html">Über uns</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Konakt.html">Kontakt</a>
            </li>
            <li class="nav-item dropdown dropdown">
              <a class="nav-link dropdown-toggle" href="Maschinen.html" 
id="navbarDropdown" role="button" data-toggle="dropdown" aria- 
haspopup="true" aria-expanded="false">
                  Dropdown
              </a>
              <div class="dropdown-menu" aria- 
enter code herelabelledby="navbarDropdown">
                <a class="dropdown-item" href="1.html">Element 1</a>
                <a class="dropdown-item" href="2.html">Element 2</a>
                <a class="dropdown-item" href="3.html">Element 3</a>
                <a class="dropdown-item" href="4.html">Element 4</a>
                <a class="dropdown-item" href="5.html">Element 5</a>
                <a class="dropdown-item" href="6.html">Element 6</a>
              </div>

【问题讨论】：

欢迎来到 SO @Marcel.rhd 首先，您的 CSS 格式错误。应该是：.dropdown-item.active { color: red; background-color: darkviolet; }
好的，非常感谢你，我很抱歉我发布了 sass 而不是 CSS。我会试试的。

标签： html bootstrap-4 navbar

【解决方案1】：

.dropdown-item:active使用这个

.dropdown-item:active{
 color: red;
 background-color: darkviolet}

<nav class="nav-justified navbar-expand-xl navbar-light">
        <div class="" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto nav-pills nav-fill">
            <li class="nav-item active">
              <a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="überuns.html">Über uns</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Konakt.html">Kontakt</a>
            </li>
            <li class="nav-item dropdown dropdown">
              <a class="nav-link dropdown-toggle" href="Maschinen.html" 
id="navbarDropdown" role="button" data-toggle="dropdown" aria- 
haspopup="true" aria-expanded="false">
                  Dropdown
              </a>
              <div class="dropdown-menu" aria- 
enter code herelabelledby="navbarDropdown">
                <a class="dropdown-item" href="1.html">Element 1</a>
                <a class="dropdown-item" href="2.html">Element 2</a>
                <a class="dropdown-item" href="3.html">Element 3</a>
                <a class="dropdown-item" href="4.html">Element 4</a>
                <a class="dropdown-item" href="5.html">Element 5</a>
                <a class="dropdown-item" href="6.html">Element 6</a>
              </div>

【讨论】：

【解决方案2】：

默认的css是从nav.scss生成的

将此添加到您的自定义 css 文件中以更改背景颜色：

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link{
     background:darkviolet 
}

我还建议您为导航栏使用自定义类，例如 my-custom-nav，并用作上述 CSS 的父级，例如：

.my-custom-nav .nav-link.active, 
.my-custom-nav .show>.nav-link{
     background:darkviolet 
}

【讨论】：