title: Bootstrap 5 navigation bar
body: <p>I would like my navigation bar to have a black background along its entire length like this: <a href="https://i.imgur.com/5aqMM98.png" rel="nofollow noreferrer">https://i.imgur.com/5aqMM98.png</a>
  I don't want to move my links in there, or my logo so that it stays in place, but just set a background on its length</p>
  <p>Second SASS compilation problem : I apply a new color to it (I don't want its gray : I define #141414 like this : <a href="https://i.imgur.com/LvMU20j.png" rel="nofollow noreferrer">https://i.imgur.com/LvMU20j.png</a> To tell it that I don't want gray-900 but #141414 however it compiles properly, but doesn't change my color how to do if it</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-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"&gt;
  
      &lt;title&gt;Kurium Client&lt;/title&gt;
      &lt;style&gt;
          .hidden {
              display: none;
          }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="container bg-dark"&gt;
          &lt;nav class="navbar navbar-expand-md navbar-dark"&gt;
              &lt;a class="navbar-brand" href="#"&gt;
                  &lt;img src="logo.svg" alt="Bootstrap" width="200" height="30" class="d-inline-block align-top"&gt;
                  &lt;span class="hidden"&gt;Kurium Client&lt;/span&gt;
                &lt;/a&gt;
              &lt;button 
                  class="navbar-toggler" 
                  type="button" 
                  data-bs-toggle="collapse" 
                  data-bs-target="#toggleMobileMenu" 
                  aria-controls="toggleMobileMenu" 
                  aria-expanded="false" 
                  aria-label="Toggle navigation"
              &gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="toggleMobileMenu"&gt;
              
                  &lt;ul class="navbar-nav ms-auto text-center"&gt;
                      &lt;li&gt;
                          &lt;a class="nav-link" href="#"&gt;Forums&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="nav-link" href="#"&gt;Purchase&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="nav-link" href="#"&gt;Media&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  
  
              &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
        &lt;div class="container"&gt;
            &lt;a href="#" class="btn btn-dark"&gt;Learn more&lt;/a&gt;
            &lt;a href="#" class="btn btn-dark"&gt;Buy Now&lt;/a&gt;
        &lt;/div&gt;
  
      &lt;!-- Optional JavaScript; choose one of the two! --&gt;
  
      &lt;!-- Option 1: Bootstrap Bundle with Popper --&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- Option 2: Separate Popper and Bootstrap JS --&gt;
      &lt;!--
      &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"&gt;&lt;/script&gt;
      --&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>