Bootstrap Navbar nasıl telefon boyutunda küçültülür?

<nav class="navbar  navbar-expand-sm justify-content-end fixed-top container-fluid" style="background-color:rgba(0,0,0)" id="cssmenu"><!--ya da end-->
  <div class="col-sm">
  <ul class="navbar-nav mr-auto py-2 my-2 px-2 mx-2">
    <a class="navbar-brand" href="#">
   
        <li class="nav-item"></li>
            <i class="icon-archive"></i>
<img src="gamalogo.png" height="40px" width="40px" ></a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">Ana Sayfa</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">Hakkımızda</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">Örnek Projeler</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">Referanslar</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">İletişim</a>
    </ul>
    <button type="button" class="navbar-toggler" data-toggler="collapse" data-target="#navbar-anamenu" aria-controls="navbar-anamenu">
      <span class="navbar-toggler-icon">
        <div class="collapse navbar-collapse" id="#navbar-anamenu">
          <ul class="navbar-nav ">
            <li class="nav-item"></li>
        <a class="nav-link" href="#">Ana Sayfa</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">Hakkımızda</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">Örnek Projeler</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">Referanslar</a>
        <li class="nav-item"></li>
        <a class="nav-link" href="#">İletişim</a>
          </ul>

        </div>
       
    </span></button>
  </div>
</nav>
</header>