Bootstrap Navbar'ı telefon boyutunda küçültme

Merhabalar Bootstrap 5'te navbar'dan menü yapmaya çalıştım ama küçültünce buton çıkmıyor. Kodumda buton da ekledim herşeyi yapmaya çalıştım ama olmuyor. 

Bu sitedeki gibi bir üst menü istiyorum. Benim yapabildiğim bu:

[CODE=css]<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>[/CODE]