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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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