Почему гамбургер-меню не прячется, а удлиняет header?

Question

При разрешении экрана 1300px у меня появляется бургер для вызова адаптивного меню, но оно почему-то не прячется, а удлиняет страницу, создавая скролл по горизонтали. Я прописал свойство transform: translateX(100%) для .menu-open, чтобы его не было видно и лишь при нажатии на hamburger_wrapper оно появлялось путем добавления класса .menu-open-active со свойством transform: translateX(0%). Но почему-то меню ведет выходит за пределы и ведет себя неадекватно. В чем проблема?

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

  .menu {
      display: none;
    }

    .request {
      display: none;
    }

    .contacts {
      flex-direction:  column;
    }

    .contacts a.number {
      margin-right: 0;
      font-size: 12px
    }

    .fab.fa-viber {
      margin-left: 0;
    }

    .menu-open {
      display: block !important;
      position: absolute !important;
      background: url(../img/menu-bg.jpg) center no-repeat;
      background-size: cover;
      right:  0;
      top: 0;
      width: 300px;
      height: 100%;
      transform: translateX(100%);
      transition: 0.3s;
      padding:  0 60px 0 30px;
    }

    .menu-open-active {
      transform: translateX(0%);
    }

    .menu-open ul {
      display:  flex;
      flex-direction:  column;
      justify-content: center;
      align-content: space-between;
      height:  100%;
      width: 100%;
    }

    .menu-open ul li  {
      display:  flex;
      justify-content: space-between;
      margin-bottom: 30px
    }

    .hamburger_wrapper {
      display: inline-block;
      z-index: 999 !important;
    }

    .main .content {
      padding-left: 0;
    }
}

<header>
        <div class="wrapper">
            <div class="content">
                <a href="#" class="logo">
                    Inter-Web
                </a>
                <nav class="menu">
                    <ul>
                        <li><a href="#">Главная</a>
                            <ul class="sub_menu">
                                <li><a href="#">Брендинг</a></li>
                                <li><a href="#">Вэб-разработка</a></li>
                                <li><a href="#">Медиа-маркетинг</a></li>
                                <li><a href="#">Комплексное<br>продвижение</a></li>
                            </ul>
                        </li>
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Услуги</a>
                        <li><a href="#">Порядок работы</a></li>
                        <li><a href="#">Этапы работы</a></li>
                        <li><a href="#">Портфолио</a></li>
                        <li><a href="#">Новости</a></li>
                        <li><a href="#">Конакты</a></li>
                    </ul>
                </nav>
                <div class="contacts">
                    <div class="phone-block">
                        <a class="number" href="tel:88005569874">8 800-556-98-74</a>
                        <button class="request open-popup">Заказать звонок</button>
                    </div>
                    <div class="social-block">
                        <i class="fab fa-viber"></i>
                        <i class="fab fa-telegram-plane"></i>
                        <i class="fab fa-whatsapp"></i>
                    </div>
                </div>
                <div class="hamburger_wrapper">
                    <div class="hamburger hamburger--spin">
                        <div class="hamburger-box">
                            <div class="hamburger-inner"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="menu-open">
        <ul>
            <li><a href="#">Главная</a>1</li>
            <li><a href="#">О нас</a>2</li>
            <li><a href="#">Услуги</a>3</li>
            <li><a href="#">Порядок работы</a>4</li>
            <li><a href="#">Этапы работы</a>5</li>
            <li><a href="#">Портфолио</a>6</li>
            <li><a href="#">Новости</a>7</li>
            <li><a href="#">Конакты</a>8</li>
        </ul>
    </div>

Сайт ilyin1ib.beget.tech

весь код jsfiddle.net/qe3j2fxu/

Answer 1

Я так понимаю, что вопрос решился, так как я не нашел бага на странице. Совет на будущее, всегда присваивайте body свойство overflow: hidden когда работаете с модальными окнами или элементами за пределами окна браузера. Если нужен вертикальный скролл - тогда применяйте overflow-x: hidden, но учитывайте особенности ios для этих свойств.

БЛОГ НА HUSL

Почему гамбургер-меню не прячется, а удлиняет header?

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