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

Я пытаюсь исправить свою панель навигации, но в мобильной версии значок гамбургера, который находится справа, отображает список меню слева, а не справа под значком. Кроме того, при нажатии вся панель навигации перемещается вверх, а значок теряется. Спасибо заранее, я буду очень признателен за некоторые рекомендации. Я пробовал так много вещей с файлом классов/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; */
}

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Учебник по Javascript
Учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
5 распространенных ошибок, которых следует избегать при начале работы с HTML
5 распространенных ошибок, которых следует избегать при начале работы с HTML
Приветствую вас, изучающие HTML! Я составил список распространенных ошибок, которые часто допускают студенты, начинающие изучать HTML. Пожалуйста,...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
0
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Фиксированная позиция должна быть сверху, если вы добавите top: 0; к #fixed, это сработает.

Спасибо, эта часть решена! высоко ценится #fixed { position: fixed; сверху: 0;

Luna 24.11.2022 00:41

Другие вопросы по теме