Проблема в отзывчивости Navbar ⇐ Html

[Anonymous]

Когда я уменьшаю размер экрана, параметры начинают исчезать < /p>

Код: Выделить всё

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menu.onclick = () => {
menu.classList.toggle('bx-x');
navbar.classList.toggle('open');
}< /code>
#menu-icon {
font-size: 35px;
color: var(--text-color);
cursor: pointer;
z-index: 10001;
display: none;
}

@media (max-width: 1280px) {

header {
padding: 14px 2%;
transition: .2s;
}

.navbar a {
padding: 5px 0;
margin: 0px 20px;
}
}

@media (max-width: 1090px) {

#menu-icon {
display: block;
}

.navbar {
position: absolute;
top: 100%;
right: -100%;
width: 270px;
height: 29vh;
background: var(--main-color);
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 10px;
transition: all .50s ease;
}

.navbar a {
display: block;
margin: 12px 0;
padding: 0px 25px;
transition: all .50s ease;
}

.navbar a:hover {
color: var(--text-color);
transform: translateY(5px);
}

.navbar a:active {
color: var(--text-color)
}

.navbar .open {
right: 2%;
}
}< /code>

[url=#][i][/i]Logo[/url]

[list]
[*][url=#]Home[/url]
[*][url=#]About me[/url]
[*][url=#]Services[/url]
[*][url=#]Blog[/url]
[*][url=#]Contact me[/url]
[/list]


[url=#][i][/i]Sign In[/url]
[url=#]Register[/url]

Здесь вы можете увидеть:


Здесь "src =" https://i.sstatic.net/iktfzkwk.png "/>
Каждый раз, когда я уменьшаю размер экрана, другие варианты Navbar не открываются, показывают только поперечный знак. Кто -нибудь может помочь мне решить эту проблему?

Подробнее здесь: https://stackoverflow.com/questions/795 ... the-navbar