Как переопределить цвет при наведении основной кнопки навигационной панели в шаблоне фрилансера начальной загрузки?

Question

При работе с официальным шаблоном фрилансера я борюсь с цветом меню основной кнопки навигации:

https://github.com/BlackrockDigital/startbootstrap-freelancer https://blackrockdigital.github.io/startbootstrap-freelancer/

Основная кнопка появляется на более узких экранах и должна иметь тот же цвет при наведении # 128f76, что и кнопка Отправить из контактной формы внизу страницы, но она синего цвета # 0062cc.

Кажется, что стиль, ответственный за это поведение:

button.bg-primary:focus, button.bg-primary:hover

и не переопределяется стилями, указанными в пользовательском freelancer.css.

Answer 1

Мне удалось это исправить, изменив следующие файлы (сделав как можно меньше изменений)

• index.html - удалить класс bg_primary, добавить btn btn-primary классы к кнопке меню

от

  <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded"

до

  <button class="navbar-toggler navbar-toggler-right text-uppercase btn btn-primary text-white rounded"

• freelancer.css - удалить класс btn, добавить недостающее важное! к btn-первичным селекторам

от

.btn {
  border-width: 2px;
}

...

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #128f76;
  border-color: #128f76;
}

до

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #128f76 !important;
  border-color: #128f76 !important;
}

Answer 2

стиль кнопки меню на мобильных устройствах

a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
background-color: #0062cc !important;
}

этот стиль находится в файле bootstrap.css. Вы должны переопределить этот цвет bg, добавив этот код в свой файл CSS