Q:

bootstrap navbar-toggler button click change the list item color and size to default for one second?

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

When i click the navbar-toggler class to show the list,for one second when its opening the color and size of list convert to black . why is it happening? how can i fix this issue?

A:

According to your CSS you already set color white (#fff) for nav-link. Bootstrap default add .show class into  Using JS. So, bootstrap pre-defined color simply override with your CSS. You can define another color when .show class added via default bootstap JS event. Check the following LiveFiddle OR Code Snippet below

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

