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

[Anonymous]

Когда я уменьшаю размер экрана, параметры начинают исчезать. Я прикрепляю картинку, где можно увидеть. < /P>

Logo

• Home
• About me
• Services
• Blog
• Contact me

Sign In
Register


< /code>

Это мой css: < /p>
#menu-icon{
font-size: 35px;
color: var(--text-color);
cursor: pointer;
z-index: 10001;
display: none;
}
< /code>
@media (max-width: 1280px) {< /p>
header{
padding: 14px 2%;
transition: .2s;
}

.navbar a{
padding: 5px 0;
margin: 0px 20px;
}
}
< /code>
@media (max-width: 1090px) {< /p>
#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>
Это мой файл Javascript: < /p>
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menu.onclick = () => {
menu.classList.toggle('bx-x');
navbar.classList.toggle('open');
}*emphasized text*
< /code>
Введите описание изображения здесь < /p>
Введите описание изображения здесь < /p>
Когда я уменьшаю размер экрана, другие параметры Navbar не открываются, показывают только поперечный знак. Кто -нибудь может помочь мне решить эту проблему?

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