القائمة العلوية لا تعمل - Bootstrap

لحل المشكلة عليك حذف هذه الأسطر البرمجية 

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </span>
</button>

وإضافة الـ button الصحيح الذي سوف يعمل مع القائمة 

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

وبعدها سوف تعمل القائمة ، ولكن سوف تحتاجين إلى إعادة تنسيق الـ button فهو يظهر بحجم كبير جداً ، يجب عليك التعامل مع هذه التنسيقات حتى يصبح الـ button بشكل مناسب 

button{
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    text-decoration:none;
    display:imline-block;
    font-size:47px;
    margin:10px 8px;
    cursor:pointer;
    background-color:#FB4934;
    width: 364px;  // تحتاج للحذف 
    height: 249px; // تحتاج للحذف 
    }

أيضاً باستخدام CSS يمكنك من ترتيب موضوعه في الشاشة وتنسيقه بشكل جميل