Навигация по слайдеру внезапно появляется при достижении меньших точек останова

Question

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

CSS код:

    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0;
        height: 92vh;
        top: 8vh;
        background-color: #54976B;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 30%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;


            li {
                opacity: 0;
            }


    }

    .burger {
        display: block;
    }

} ```

### Then this is my active class so the transform occurs when the hamburger menu is being clicked
``` .nav-active {
    transform: translateX(0);


}

А это мой JavaScript код:

    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.nav-links')

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active')
    })
}

Answer 1

Ваш код, кажется, работает, просто burger также не виден на мобильном телефоне. Попробуйте добавить это для отслеживания:

@media (max-width: 800px) {
  .burger {
    display: block;
    width:20px;
    height:20px;
    border:1px solid red;
  }
}