Блог

Главная - Вопросы по программированию - Меню гамбургера не отображается

Меню гамбургера не отображается

#css #sass

#css #sass

Вопрос:

 amp;__menu{ //mobile menu

> span{
    display: block;
    width: 26px;
    height: 2px;
    background-color: $darkBlue;
}

  <a href="#" class="header__menu">
    <span></span>
    <span></span>
    <span></span>
  </a>

Я понимаю, что ему нужны высота и ширина, как показано в коде, но в firefox dev ed и Chrome его высота равна 0. может ли кто-нибудь помочь мне в этом, вероятно, из-за моей ошибки, учитывая, что я новичок в веб-разработке, но это работало для меня раньше.

Ответ №1:

Используете ли вы scss или sass и т. Д.? Если нет, выделите красный цвет для фона, если он работает без проблем.

Также span является inline-block элементом. Вы не должны display:block

Комментарии:

1. Я использую файлы Scss, а затем использую компилятор sass, также я наблюдал, как кто-то делал учебник по нему, и они каким-то образом заставили эту часть scss работать. я попробую ответить на оба вопроса, вернусь и сообщу вам, как все прошло. приветствую, ребята.

Ответ №2:

Если вы используете SCSS, вот как вы можете это сделать.

 .header {

 amp;__menu {
display: flex;
flex-direction: column;
width: 40px;
height: 40px;
justify-content: space-around;
align-items: center;

span {
  display: inline-block;
  width: 26px;
  height: 2px;
  background-color: black;
}

 }

}