Отзывчивая навигационная панель / выпадающее меню показывает ссылки. Как выровнять его правильно, под гамбургер-меню?

Я пытаюсь исправить свою панель навигации, но в мобильной версии значок гамбургера, который находится справа, отображает список меню слева, а не справа под значком. Кроме того, при нажатии вся панель навигации перемещается вверх, а значок теряется. Спасибо заранее, я буду очень признателен за некоторые рекомендации. Я пробовал так много вещей с файлом классов/CSS. codepen ->ссылка . внешний вид для ПК и мобильных устройств

  <div class = "container-fluid">
    <header>
      <!-----left---->
      <div class = "navbar navbar-expand-sm navbar-light navbar-lu">
        <div class = "container-fluid" id = "fixed">
          <div>
            <h6 id = "nav-h6"><strong>I'm Luna</strong></h6>
            <p id = "nav-p">a <span class = "highlight">ux/ui</span> designer</p>
          </div>
          <!-----toggler---->
          <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>

          <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
            <ul class = "navbar-nav me-auto">
              <li class = "nav-item active">
                <a class = "nav-link" href = "#top">home</a>
              </li>
              <li class = "nav-item">
                <a class = "nav-link" href = "#work">work</a>
              </li>
              <li class = "nav-item">
                <a class = "nav-link" href = "#about">about</a>
              </li>
              <li class = "nav-item dropdown">
              <div class = "dropdown-menu dropdown-menu-end" aria-labelledby = "navbarDropdown">
                  <a class = "dropdown-item" href = "#top">home</a>
                  <a class = "dropdown-item" href = "#work">work</a>
                  <a class = "dropdown-item" href = "#about">about</a>
                  <a class = "dropdown-item" data-turbo-method = "delete" href = "#">Log out</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
    </header>
  </div>

/* ---NAVBARLU--- */
.navbar-lu {
  justify-content: space-between;
  background: white;
}
.navbar-lu .navbar-collapse {
  flex-grow: 0;
}
.navbar-lu .navbar-brand img {
  width: 40px;
}

#fixed {
  position: fixed;
  background-color: white;
  padding-top: 2rem;
  margin-top: 0rem;
  padding-right: 4rem;
  padding-bottom: 1rem;
  /* keeps navbar on top of items when scrolling */
  z-index: 1;
}

.navbar-light .navbar-nav .nav-link {
  color: black;
  /* border: none; */
}
.navbar-toggler-icon {
  background-color: #ffffff;
  /* border: none; */
}
#nav-p {
  margin: 0rem;
}
#nav-h6 {
  margin: 0rem;
}
.nav-link {
  margin-bottom: 0rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
  /* justify-content: end; */
}