0

при адаптиве появляется нижний скролл.

https://ninjajostkiy.github.io/help/ - гитхаб

Сам код:

// BURGER
.burger {
    display: none;
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 120px;
    z-index: 5;
}


.line {
    width: 25px;
    height: 3px;
    margin: 5px;
    background-color: #FFF;
    transition: all .4s ease;
}

.active {
    transition: all .3s;
}

.menu__list.active {
    transform: translateX(0%);
}

.mobile-icons {
    a {
        display: none;
    }
    .mobile-icons-btn{
        padding: 15px 25px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.45px;
        background-color: transparent;
        border: 1px solid #fff;
        transform: skew(-15deg);
    }
}

//



@media(max-width: 930px) {
    .burger {
        display: block;
        z-index: 5;
    }

    .header__bottom-title {
        font-size: 120px;
    }

    .menu__list {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transition: all .3s;
        background-color: rgba(0, 0, 0, .9);
        padding-top: 50px;
        padding-bottom: 50px;
        width: 250px;
        height: 100vh;
        top: 0;
        right: 0;
        z-index: 5;
        transform: translateX(100%);

        .mobile-icons {
            a {
                display: block;
            }
        }

        li {
            color: #fff;
            padding: 0;
            margin: 0;
        }
    }

    .header__top-login {
        display: none;
    }
}

И если нужен скрин кода то вот:

3
  • 1
    Лучше вставьте код в соответствующем тэге. Код с картинки нельзя скопировать. 3 окт 2020 в 18:52
  • Добавил, вроде это все
    – Jrac
    3 окт 2020 в 18:56
  • уберите скрины кода. 3 окт 2020 в 18:58

1 ответ 1

0

Ваше меню при адаптиве прыгает вправо от основного области экрана: введите сюда описание изображения

Затем при вызове меню оно просто выезжает в основную область. Этот ответ должен вам помочь: https://stackoverflow.com/a/6746694/9047572

Продублирую ответ здесь:

Чтобы не было скролла, поставьте overflow-x: hidden и position: relative для вашей основной области (блок-контейнер меню).

.outer {
  overflow: hidden;
  position: relative;
}
.inner {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  top: 50px;
}
<div class="outer">
  <div class="inner">
    CONTENT
  </div>
</div>

3
  • Если вы про body, или header(где находиться это все), то я делал, ничего не помогает
    – Jrac
    3 окт 2020 в 18:58
  • @Jrac вроде этот ответ должен вам помочь: stackoverflow.com/a/6746694/9047572 3 окт 2020 в 19:06
  • хорошо, спасибо за помощь, щас посмотрю
    – Jrac
    3 окт 2020 в 19:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.