@Orleond

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

Здравствуйте. Знающие люди, подскажите, как поменять цвет у ссылки в бустраповской навигации на свой. Для удобного чтения моего кода, я убрал 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, но почему-то мне кажется, что опытные разработчики так не делают. Или всё-же делают?
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
@Orleond Автор вопроса
Благодаря "наводке" Ankhena, было найдено решение.
Собственно, вот и оно:
.navbar-light .navbar-nav .nav-link {
    color: #234512;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
miraage
@miraage
Старый прогер
Если открыть 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;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы