Проблема с меню-бургер

Question

Почему кнопка бургер не показывается при нужном разрешении экрана?

  .hamburger-wrapper{
  display: none;
}

@media (max-width: 768px) {
  .hamburger-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $purple;
    border-radius: 10px;
    cursor: pointer;

    .hamburger-icon {
      width: 30px;
      height: 18.47px;
      background: url("../img/header/hamburger.svg") no-repeat;
      background-size: contain;
      background-position: center;
      filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .1));
      }

     }
 }

<div class="hamburger-wrapper">
          <div class="hamburger-icon"></div>
</div>

Answer 1

Поправил ваш код:

.hamburger-wrapper {
  display: none;
}

@media (max-width: 768px) {
  .hamburger-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $purple;
    border-radius: 10px;
    cursor: pointer;
  }

  .hamburger-icon {
    width: 30px;
    height: 18.47px;
    background: url("https://icons.getbootstrap.com/assets/icons/list.svg") no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .1));
   }
}

<div class="hamburger-wrapper">
  <div class="hamburger-icon"></div>
</div>

У вас просто был не валидный CSS, иконку можете обратно заменять на свою, изменил её чтобы было видно результат.

БЛОГ НА HUSL

Проблема с меню-бургер

Ответы (1 шт):