переполнение-x в css работает неправильно

#html #css

Вопрос:

У меня здесь есть веб-сайт, и я только что добавил список бургеров для мобильных пользователей. Когда список бургеров закрыт, список остается за пределами экрана. Я не хочу, чтобы пользователи прокручивали страницу в сторону и видели закрытое меню.

Я добавил overflow-x: hidden; body в css.

На всякий случай, если вам нужно это увидеть, код приведен ниже:

 @media only screen and (max-width: 800px) {
    body {
        overflow-x: hidden;
    }

    .nav-links {
        position: absolute;
        right: 0;
        height: 92vh;
        top: 70px;
        background-color: #3a345c;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    /* More css but I don't think they are needed */
}

PS : Я использую django (я не знаю, важно ли это, но я хотел добавить его)

1. Пожалуйста, поделитесь минимальным примером, показывающим проблему, с которой вы столкнулись в CodeSandbox(например)

2. @hariom Это на самом деле в сети прямо сейчас, вы можете перейти на northernbladetl.com/chapter/0 с мобильного устройства и убедитесь в этом сами

3. Если ширина страницы навигация шире ширины экрана, переполнение-x в теле, скорее всего, не сработает

4. @DonkeyKong Я не думаю, что это так, но не могли бы вы проверить это на всякий случай, ссылка выше

Ответ №1:

Попробуйте добавить display:none , когда бургер закрыт ?

1. Когда я это делаю, я теряю анимацию, когда открываю бургер

2. Пожалуйста, укажите дополнительную информацию в своем ответе. Как это написано в настоящее время, трудно понять ваше решение.