bootstrap нажатие кнопки переключателя навигационной панели изменить цвет и размер элемента списка на значение по умолчанию на одну секунду?

Question

.navbar .collapse .navbar-nav .nav-item .nav-link {
 font-family: 'yekan';
  color: #fff;
  opacity: .8;
  font-size: .9rem;
  padding-left: 15px;
  padding-right: 15px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light ">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                    <i class="fas fa-bars"></i>
                                </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing1</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing2</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing3</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing4</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <div>
        <button id="btn-search" class="my-2 my-sm-0 fa-pull-left " type="button"><i class="fas fa-search"></i></button>
        <input class="search-input form-control mr-sm-2" type="search" placeholder="search" aria-label="Search">
      </div>
    </form>
  </div>
</nav>

Когда я нажимаю класс navbar-toggler, чтобы показать список, на одну секунду при его открытии цвет и размер списка преобразуются в черный. почему это происходит? как я могу исправить эту проблему?

Answer 1

Согласно вашему CSS вы уже установили белый цвет (#fff) для nav-ссылки. Bootstrap по умолчанию добавить .show класс в Используя JS. Итак, предварительно определенный цвет bootstrap просто заменяется вашим CSS. Вы можете определить другой цвет, когда класс .show добавлен через событие начальной загрузки JS по умолчанию. Проверьте следующий LiveFiddle ИЛИ фрагмент кода ниже

.navbar .collapse .navbar-nav .nav-item .nav-link {
 font-family: 'yekan';
  color: #fff;
  opacity: .8;
  font-size: .9rem;
  padding-left: 15px;
  padding-right: 15px
}
.navbar .collapse.show .navbar-nav .nav-link {
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light ">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                    <i class="fas fa-bars"></i>
                                </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing1</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing2</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing3</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">sthing4</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <div>
        <button id="btn-search" class="my-2 my-sm-0 fa-pull-left " type="button"><i class="fas fa-search"></i></button>
        <input class="search-input form-control mr-sm-2" type="search" placeholder="search" aria-label="Search">
      </div>
    </form>
  </div>
</nav>