Bootstrap 5, how to change the color of the links in the navigation to your own?

Question

css

Hello. Knowledgeable people, tell me how to change the color of the link in the bootstrap navigation to your own. To make my code easier to read, I removed the button and the full list of navigation items, leaving only one. The a tag has its own header-link class.
HTML code:

<nav class="navbar navbar-expand-lg navbar-light pm-0">
     <div class="container-fluid header-menu">
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100 justify-content-between">
                    <li class="nav-item">
                         <a class="nav-link header-link" aria-current="page" href="#">Главная</a>
                    </li>
               </ul>
          </div>
     </div>
</nav>

CSS styles:

header-link {
         color: #234512;
}

I tried renaming my class name, tried redefining the .nav-link color, only adding !important helped, but for some reason it seems to me that experienced developers do not do this. Or do they still do it?

Answer 1

Thanks to Ankhena 's "tip" , a solution was found.
Actually, here it is:

.navbar-light .navbar-nav .nav-link {
    color: #234512;
}

Answer 2

If you open https://cdn.jsdelivr.net/npm/[email protected]/dist/... and search for .navbar-dark...
I would suggest that you need to change the same classes for your case

.navbar-dark .navbar-brand {
  color: #fff;
}
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}