如何使导航栏更加突出？

Question

我的页面上有一个导航栏，但由于某些原因，只有“主页”链接是纯白色的。其余的链接没有那么亮。我正在尝试创建一个以图片为背景的透明导航栏。我已经做到了，但是“首页”链接比其他链接要亮得多，也更突出。该图像可以在下面看到：

      <div class="container-fluid p-0">
     <nav class="navbar navbar-expand-lg fixed-top navbar-dark">
      <a class="navbar-brand" href="#">
        <i class="fas fa-mountain fa-2x mx-3"></i>Greatness</a> <!--This is the icon for the brand-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 
         aria-controls="navbarNav" aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="fas fa-align-right text-light"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="mr-auto"></div>
        <ul class="navbar-nav justify-content-center">
          <li class="nav-item active">
            <a class="nav-link" href="indexHome.html">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="AboutUs.html">ABOUT US
                <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">IDEAS</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">MOTIVATION</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">LOG IN</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

CSS

.nav-item:last-child{ 
    padding-right: 10.5em;

}
.nav-item{  
    padding: 0.9em;
    color: white;
    font-size: 17px;

}
.navbar-brand{  
    padding-left: 8em;
}

Answer 1

在CSS中执行此操作：

.nav-link {
   color: white;
}

Answer 2

这是因为active和class一样，在li中定义了<li class="nav-item active">。将active class添加到其同级中，并且应该可以使用。