title: What is the new way to change the nav text color with Bootstrap 5?
body: <p>I'm trying to use Bootstrap 5 and here is my problem. I was changing the color of the <code>nav li a</code> element directly in the css with Bootstrap 4. But now, with B5 this way does not work.
  Do you guys know how can I change it please ?</p>
  <p>Here is an example.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-brand {
      color: #3DB9C3 !important;
  }
  
  .banniere nav li a { 
       color: #3DB9C3 !important; 
  } 
  
  .banniere nav li a:hover {
      color: #0D4B50 !important;
  }
  
  /*Screen &lt; to 1250px*/
  @media (max-width: 1250px) { 
      .nav-item:hover {
          background-color: #3DB9C3;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-expand-lg banniere border-bottom"&gt;
          &lt;div class="container"&gt;
           &lt;a class="navbar-brand"&gt;Name Test&lt;/a&gt;          
                      &lt;button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" style="outline-color: #3DB9C3;"&gt;
                            &lt;span style="color: #3DB9C3"&gt;&lt;i class="fas fa-bars"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;div class="collapse navbar-collapse text-center" id="navbarResponsive"&gt;
                          &lt;ul class="navbar-nav ms-auto"&gt;
                              &lt;li class="nav-item active me-3"&gt;
                                  &lt;a class="nav-link" href="#"&gt;Test1
                                      &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item me-3"&gt;
                                  &lt;a class="nav-link" href="#"&gt;Test2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item me-3"&gt;
                                  &lt;a class="nav-link" href="#"&gt;Test3&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item me-3"&gt;
                                  &lt;a class="nav-link" href="#"&gt;Test4&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Cordially</p>