Elementor: складное меню должно регулировать ширину тока NAVBAR (сокращение NAVBAR) ⇐ CSS

[Anonymous]

У меня есть Navbar, который сжимается на прокрутке, на мобильном (Burgermenu). Я хочу, чтобы открытое меню было тем же размером с того же размера, что и Navbar в его нормальном или смягченном состоянии, оно всегда должно приспосабливаться к ширине причудливой навигации. Я работаю с Elementor Pro Btw. < /P>
Код, который у меня есть сейчас: < /p>
Код в разделе Navbar: < /p>
#main-header {
width: 100%;
transition: width 0.3s ease;
margin: 0 auto;
padding: 0;
}

#nav-container {
width: 100%;
transition: width 0.3s ease, background-color 0.3s ease;
background-color: transparent;
padding: 0;
border-radius: 50px;
}

#main-header.shrink-header #nav-container {
width: 60%;
background-color: rgba(217, 217, 217, 0.6);
padding: 0% 1% 0% 1%;
}

@media screen and (max-width: 767px) {
#main-header.shrink-header #nav-container {
width: 86%;
background-color: rgba(217, 217, 217, 0.6);
padding: 0% 1% 0% 1%;
}
}
< /code>
Код в меню виджет: < /p>
.elementor-nav-menu--dropdown{
background-color: blue;
width: inherit;
transition: width 0.3s ease;
left: -120% !important;

}
< /code>
Мой скрипт: < /p>

document.addEventListener("DOMContentLoaded", function() {
var header = document.getElementById("main-header");
window.addEventListener("scroll", function() {
if (window.scrollY > 50) {
header.classList.add("shrink-header"); // Klasse hinzufügen
} else {
header.classList.remove("shrink-header"); // Klasse entfernen
}
});
});


< /code>
У вас есть идеи, как я могу это сделать? Я также добавил картинку, как выглядит мой Navbar.
заранее!

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