Не работает бургер (HTML and CSS)

Question

Не работает бургер (HTML and CSS)

Рейтинг: 0Ответов: 1Опубликовано: 24.02.2023

не отображается бургер в браузере, переписывала несколько раз код, но так и не поняла в чем заключается ошибка. Буду рада, если кто-то поможет.

body {
  background-color: black;
  font-family: "Poppins";
  font-weight: 300;
  color: #9c9c9c;
}

.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

[class*="__container"] {
  max-width: 1310px;
  margin: 0 auto;
  padding: 0pt 15px;
}

.page {
  flex: 1 1 auto;
}


/*Основне*/

.button {
  display: inline-block;
  text-align: center;
  padding: 16px 30px;
  background-color: blue;
  border-radius: 50px;
  color: #fff;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease 0s;
  line-height: 1.43;
}

@media (max-widht:991.98) {
  .button {
    padding: 14px 20px;
  }
}

.button:hover {
  background-color: rgb(42, 42, 255);
}


/*Основне кінець*/

.header {}

.header__container {
  display: flex;
  column-gap: 35px;
  align-items: center;
  min-height: 116px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.header__menu {
  flex: 1 1 auto;
}

.menu {}

.menu__icon {}

.menu__body {}

.menu__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 35px;
  row-gap: 3px;
  justify-content: flex-end;
}

.menu__item {}

.menu__link {
  display: block;
  font-size: 16px;
  color: rgb(255, 255, 255);
  line-height: 1.62;
}

.menu__link:hover {
  text-decoration: underline;
}

.header__cart {}

.cart-header {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cart-header:hover .cart-header__text {
  text-decoration: underline;
}

.cart-header__text {
  font-size: 18px;
  line-height: 1.55;
}

.cart-header__quantity {
  background: #9c9c9c;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

.header__button {
  flex: 0 0 auto;
}

.icon-menu {
  display: none;
}

.header__logo,
.header__cart,
.header__button {
  position: relative;
  z-index: 5;
}

@media (max-widht:991.98) {
  .header__container,
  .menu__list {
    column-gap: 25px;
  }
  .header__container {
    min-height: 90px;
  }
}

@media (max-widht: 767.98px) {
  .header__container,
  .menu__list {
    column-gap: 15px;
  }
  .icon-menu {
    display: block;
    flex: 0 0 30px;
    height: 18px;
    position: relative;
    z-index: 5;
  }
  .icon-menu span,
  .icon-menu::before,
  .icon-menu::after {
    content: "";
    right: 0;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
  }
  .icon-menu::before {
    top: 0;
  }
  .icon-menu::after {
    bottom: 0;
  }
  .menu__body {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    left: -100%;
    top: 0px;
    padding: 100px 15px 30px 15px;
    overflow: auto;
    transform: left 0.3s ease 0s;
  }
  .menu__body::before {
    content: "";
    width: 100%;
    position: fixed;
    top: 0;
    left: -100%;
    height: 70px;
    background-color: #000;
    z-index: 2;
    transform: left 0.3s ease 0s;
  }
  .menu__list {
    row-gap: 10px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .menu__link {
    font-size: 32px;
  }
  .header__container {
    min-height: 70px;
  }
}

@media (max-width: 560px) {
  .header__logo {
    width: 32px;
    flex: 0 0 32px;
    overflow: hidden;
  }
  .cart-header__text {
    display: none;
  }
  .cart-header__quantity {
    width: 33px;
    height: 45px;
    padding: 3px;
    border-radius: 0;
  }
}

<div class="wrapper">
  <header class="header">
    <div class="header__container">
      <a href="" class="header__logo">
        <img src="" alt="logo">
      </a>
      <nav class="header__menu menu">
        <div class="menu__body">
          <ul class="menu__list">
            <li class="menu__item">
              <a href="" class="menu__link">Home</a>
            </li>
            <li class="menu__item">
              <a href="" class="menu__link">About</a>
            </li>
            <li class="menu__item">
              <a href="" class="menu__link">Pages</a>
            </li>
            <li class="menu__item">
              <a href="" class="menu__link">Services</a>
            </li>
          </ul>
        </div>
      </nav>
      <a href="" class="header__cart cart-header">
        <span class="cart-header__text">Cart</span>
        <span class="cart-header__quantity">1</span>
      </a>
      <a href="" class="header__button button">Get start</a>
      <button class="icon-menu" type="button">
        <span></span>
      </button>
    </div>
  </header>
  <main class="page"></main>
  <footer class="footer"></footer>
</div>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Не забывайте про теги

<html>
<head>
<body>

Также я не понял, что в вашем понимании бургер? Если вы имели в виду меню-гамбургер, то в данном коде обыкновенное меню и никакого гамбургера нет

Я немного переписал код и теперь верстка отображается корректно, хотя и она сама по себе немного странная:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Some title</title>

    <style>
      body {
        background-color: black;
        font-family: "Poppins";
        font-weight: 300;
        color: #9c9c9c;
      }

      .wrapper {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: clip;
      }

      [class*="__container"] {
        max-width: 1310px;
        margin: 0 auto;
        padding: 0pt 15px;
      }

      .page {
        flex: 1 1 auto;
      }

      /*Основне*/
      .button {
        display: inline-block;
        text-align: center;
        padding: 16px 30px;
        background-color: blue;
        border-radius: 50px;
        color: #fff;
        letter-spacing: 2px;
        font-size: 14px;
        font-weight: 500;
        transition: background-color 0.3s ease 0s;
        line-height: 1.43;
      }

      @media (max-widht: 991.98) {
        .button {
          padding: 14px 20px;
        }
      }

      .button:hover {
        background-color: rgb(42, 42, 255);
      }
      /*Основне кінець*/

      .header__container {
        display: flex;
        column-gap: 35px;
        align-items: center;
        min-height: 116px;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      .header__menu {
        flex: 1 1 auto;
      }

      .menu__list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 35px;
        row-gap: 3px;
        justify-content: flex-end;
      }

      .menu__link {
        display: block;
        font-size: 16px;
        color: rgb(255, 255, 255);
        line-height: 1.62;
      }

      .menu__link:hover {
        text-decoration: underline;
      }

      .cart-header {
        color: #fff;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .cart-header:hover .cart-header__text {
        text-decoration: underline;
      }

      .cart-header__text {
        font-size: 18px;
        line-height: 1.55;
      }
      .cart-header__quantity {
        background: #9c9c9c;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
      }
      .header__button {
        flex: 0 0 auto;
      }
      .icon-menu {
        display: none;
      }

      .header__logo,
      .header__cart,
      .header__button {
        position: relative;
        z-index: 5;
      }

      @media (max-widht: 991.98) {
        .header__container,
        .menu__list {
          column-gap: 25px;
        }
        .header__container {
          min-height: 90px;
        }
      }

      @media (max-widht: 767.98px) {
        .header__container,
        .menu__list {
          column-gap: 15px;
        }

        .icon-menu {
          display: block;
          flex: 0 0 30px;
          height: 18px;
          position: relative;
          z-index: 5;
        }

        .icon-menu span,
        .icon-menu::before,
        .icon-menu::after {
          content: "";
          right: 0;
          position: absolute;
          width: 100%;
          height: 2px;
          background-color: #fff;
        }
        .icon-menu::before {
          top: 0;
        }
        .icon-menu::after {
          bottom: 0;
        }

        .menu__body {
          position: fixed;
          width: 100%;
          height: 100%;
          background-color: black;
          left: -100%;
          top: 0px;
          padding: 100px 15px 30px 15px;
          overflow: auto;
          transform: left 0.3s ease 0s;
        }

        .menu__body::before {
          content: "";
          width: 100%;
          position: fixed;
          top: 0;
          left: -100%;
          height: 70px;
          background-color: #000;
          z-index: 2;
          transform: left 0.3s ease 0s;
        }

        .menu__list {
          row-gap: 10px;
          flex-direction: column;
          justify-content: center;
          text-align: center;
        }

        .menu__link {
          font-size: 32px;
        }

        .header__container {
          min-height: 70px;
        }
      }

      @media (max-width: 560px) {
        .header__logo {
          width: 32px;
          flex: 0 0 32px;
          overflow: hidden;
        }

        .cart-header__text {
          display: none;
        }

        .cart-header__quantity {
          width: 33px;
          height: 45px;
          padding: 3px;
          border-radius: 0;
        }
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <header class="header">
        <div class="header__container">
          <a href="" class="header__logo">
            <img src="" alt="logo" />
          </a>
          <nav class="header__menu menu">
            <div class="menu__body">
              <ul class="menu__list">
                <li class="menu__item">
                  <a href="" class="menu__link">Home</a>
                </li>
                <li class="menu__item">
                  <a href="" class="menu__link">About</a>
                </li>
                <li class="menu__item">
                  <a href="" class="menu__link">Pages</a>
                </li>
                <li class="menu__item">
                  <a href="" class="menu__link">Services</a>
                </li>
              </ul>
            </div>
          </nav>
          <a href="" class="header__cart cart-header">
            <span class="cart-header__text">Cart</span>
            <span class="cart-header__quantity">1</span>
          </a>
          <a href="" class="header__button button">Get start</a>
          <button class="icon-menu" type="button">
            <span></span>
          </button>
        </div>
      </header>
      <main class="page"></main>

      <footer class="footer"></footer>
    </div>
  </body>
</html>

Советую подробнее почитать про структуру html файлов. Например, здесь

А также про тэги в head'e. Например, здесь

Не работает бургер (HTML and CSS)

Ответы