Показать сообщение отдельно
  #1 (permalink)  
Старый 02.08.2023, 17:30
Аватар для deniscikasov@gmail.com
Аспирант
Отправить личное сообщение для deniscikasov@gmail.com Посмотреть профиль Найти все сообщения от deniscikasov@gmail.com
 
Регистрация: 14.03.2023
Сообщений: 82

Адаптивное меню
Вот так вот получается
Скрин - https://skr.sh/sL7DVWiPFnI?a
Что может быть не так?

Нужно что бы при нажатии на бургер отображались пункты меню на черном фоне.
<header class="header">
    <div class="wrapper">
      <div class="header__item">
        <div class="header__logo">
          <a href="#">
            <img src="./img/figma/odigo-Logo.svg" alt="">
          </a>
        </div>
        <nav class="navbar">
          <ul class="header__list">
            <li class="header__link">
              <a href="#">Меню</a>
            </li>
            <li class="header__link">
              <a href="#">Меню</a>
            </li>
            <li class="header__link">
              <a href="#">Меню</a>
            </li>
            <li class="header__link">
              <a href="#">Меню</a>
            </li>
          </ul>
        </nav>
        <div class="header__burger">
          <span class="burger-1 burger-1-mod-1"></span>
          <span class="burger-1 burger-1-mod-2"></span>
          <span class="burger-1 burger-1-mod-3"></span>
        </div>
      </div>
    </div>
  </header>


css
.header {
   padding-top: 65px;
   position: fixed;
   width: 100%;

}

.header__burger {
   width: 40px;
   height: 28px;
   position: relative;
   display: none;

   .burger-1 {
      display: block;
      width: 100%;
      height: 2px;
      position: absolute;
      left: 0;
      background-color: red;
   }

   .burger-1-mod-1 {
      top: 0;
   }

   .burger-1-mod-2 {
      top: 50%;
   }

   .burger-1-mod-3 {
      bottom: 0;
   }
}


@media screen and (max-width:767px) {
   .header__burger {
      display: block;
   }

   .header__list {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #000;
      z-index: 999;
      padding: 75px;
      margin-right: 0;

      .header__link {
         width: 100%;
         margin-right: 0;
         margin-bottom: 30px;

         a {
            font-size: 42px;
            line-height: 48px;
         }
      }
   }
}

Последний раз редактировалось deniscikasov@gmail.com, 02.08.2023 в 21:06.
Ответить с цитированием