Позиция меняется из-за относительного значения
left
в классе
.header_navbar
, чтобы это исправить в данном случае я бы поменял
left
на
transform: translateX(-80%)
А при открытии менял значение
translateX
.header_navbar {
position: absolute;
transform: translateX(-80%);
top: 0%;
width: 910px;
height: 100vh;
display: flex;
justify-content: center;
letter-spacing: 5px;
align-items: center;
backdrop-filter: blur(50px);
border-right: 3px solid rgba(255, 255, 255, 0.5);
transition: transform 2s;
}
.header.open .header_navbar{
transform: translateX(-10%);
}
P.S. небольшой совет, в начале css файла лучше всего обнулять стандартные стили вот этой строкой
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}