CSS: фокус не будет работать с Bootstrap navbar

Question

Проблема в том, что фокус не будет работать в CSS. Я предполагаю, что это может быть потому, что я использую Bootstrap, но я перепробовал все, что смог найти о фокусе Bootstrap. Обратите внимание, что из моего фрагмента ниже: фокус работает для якорей, к которым не прикреплен html. Пожалуйста, помогите, если вы можете. Спасибо!

/* NAVIGATION */

.logo {
  display: inline-flex;
  flex-direction: row;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.navbar-brand {
  margin: 0px;
  padding: 0px 0px !important;
}

#navbar .nav-link:focus {
  color: #8e0000;
  text-size-adjust: 1.4em;
}

.logo-wrapper {
  color: white;
  font-size: 1.4em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 2px 1px black;
}

.logo-spin {
  -webkit-animation: spin 1s;
  animation: spin 3s;
  animation-iteration-count: 1;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

.navbar {
  background-color: #333;
  height: 65px;
  border-bottom: 6px solid #212529;
  border-top: 6px solid #212529;
}

#navbar {
  z-index: 9999;
}

.navbar-text {
  vertical-align: middle;
  margin-left: 200px;
  height: inherit;
}

@media only screen and (max-width: 860px) {
  .navbar-text {
    display: inline-block;
    align-items: center;
    margin-left: 30px;
  }
}

#navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 30px;
  text-decoration: none;
  font-size: 1.2em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 1px 1px black;
}

Answer 1

Если я правильно понимаю вашу проблему, вы хотите, чтобы цвет был выделен.

Есть две вещи, которые вы можете сделать для кнопки.

1. : активный
2. : при наведении

вы можете выбрать тот, который вам нужен, для вашего примера я использовал :hover, который может служить вашей цели.

.logo {
  display: inline-flex;
  flex-direction: row;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.navbar-brand {
  margin: 0px;
  padding: 0px 0px !important;
}

#navbar .nav-link:focus {
  color: #8e0000;
  text-size-adjust: 1.4em;
}

#navbar .nav-link:hover {
  color: yellow;
  display: block;
  background-color: blue;
  text-size-adjust: 1.4em;
}

.logo-wrapper {
  color: white;
  font-size: 1.4em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 2px 1px black;
}

.logo-spin {
  -webkit-animation: spin 1s;
  animation: spin 3s;
  animation-iteration-count: 1;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

.navbar {
  background-color: #333;
  height: 65px;
  border-bottom: 6px solid #212529;
  border-top: 6px solid #212529;
}

#navbar {
  z-index: 9999;
}

.navbar-text {
  vertical-align: middle;
  margin-left: 200px;
  height: inherit;
}

@media only screen and (max-width: 860px) {
  .navbar-text {
    display: inline-block;
    align-items: center;
    margin-left: 30px;
  }
}

#navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 30px;
  text-decoration: none;
  font-size: 1.2em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 1px 1px black;
}

Answer 2

Я проверяю это, и оно работает хорошо! сфокусируйтесь на ней с помощью клавиши на клавиатуре

---

и, возможно, вам понадобится: hover или ...