如何覆盖引导程序自由职业者模板中主导航栏按钮的悬停颜色？

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

移动设备上的菜单按钮的样式为

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

此样式在bootstrap.css文件中。 您应通过将此代码添加到CSS文件

来覆盖此bg颜色

Answer 2

我能够通过更改以下文件（进行尽可能少的更改）来修复它

• 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-primary选择器

来自

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