Bootstrap 5, как поменять цвет ссылок в навигации на свой?

Question

[Orleond]

Здравствуйте. Знающие люди, подскажите, как поменять цвет у ссылки в бустраповской навигации на свой. Для удобного чтения моего кода, я убрал button и полный список пунктов навигации, оставив только один. Тегу a присвоен собственный класс header-link.
HTML-код:

<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-стили:

header-link {
         color: #234512;
}

Пробовал переименовывать название своего класса, пробовал переопределять цвет .nav-link, помогло лишь добавление !important, но почему-то мне кажется, что опытные разработчики так не делают. Или всё-же делают?

Comments

[Ankhena]

- Проверить специфичность. Инструменты разработчика на вкладке Computed показывают почему свойство применилось или нет.
- Внести изменения в файл с переменными

[Orleond]

Ankhena, Спасибо за оперативность. Вижу, что мой стиль перекрывает другой стиль (оно и понятно было), не подскажете, как исправить?

rgba(0,0,0,.55) .navbar-light .navbar-nav .nav-link
#234512 .header-link (перечёркнуто) <--- Мой стиль
#0d6efd .nav-link (перечёркнуто)
... ещё несколько перечёркнутых стилей

[Ankhena]

Orleond, я уже написала вариант с заменой переменных.
Второй: перебить селектором с тем же весом.
https://css-live.ru/css/pravilnaya-shpargalka-po-c...

[Orleond]

Ankhena, спасибо большое за помощь!
Почитав то, что дали и немного погуглив на эту тему, удалось-таки сделать так, как я хотел.
Изначально я написал код со своим селектором

.navbar-light .navbar-nav .header-link {
    color: red;
}

А потом и вовсе его убрал, просто переопределив бутстраповский код

.navbar-light .navbar-nav .nav-link {
    color: red;
}

Спасибо Вам за помощь, плюсик Вам в карму)

Answer 1

[Orleond]

Благодаря "наводке" Ankhena, было найдено решение.
Собственно, вот и оно:

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

Answer 2

[Mikhail Osher]

Если открыть https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/... и сделать поиск по .navbar-dark...
Я бы предположил, что нужно те же классы менять для своего случая

.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;
}

Comments

[Orleond]

Спасибо за рекомендацию!
Надо было просто в своём файле со стилями переопределить селектор, отображаемый в режиме разработчика на вкладке Computed как перекрывающий мой селектор