Elementor移动端折叠菜单适配收缩导航栏宽度的实现方案咨询

各位好，我现在遇到个Elementor Pro的导航栏问题想请教下：我做了一个滚动时会自动收缩的导航栏，但是在移动端的汉堡菜单展开后，下拉菜单的宽度没法和当前导航栏的宽度同步——不管导航栏是正常状态还是滚动后的收缩状态，我都希望下拉菜单能自动适配它的宽度。

我目前已经写了这些代码，但是下拉菜单的宽度还是不对，麻烦帮忙看看怎么调整：

导航栏区域的CSS代码 #

#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%;
}
}

菜单小部件的CSS代码 #

.elementor-nav-menu--dropdown{
    background-color: blue;
    width: inherit;
    transition: width 0.3s ease;
    left: -120% !important;
}

配套的JavaScript脚本 #

document.addEventListener("DOMContentLoaded", function() {
    var header = document.getElementById("main-header");
    window.addEventListener("scroll", function() {
        if (window.scrollY > 50) {
            header.classList.add("shrink-header"); // 添加收缩类
        } else {
            header.classList.remove("shrink-header"); // 移除收缩类
        }
    });
});

我还拍了一张当前导航栏的效果示意图，能更直观看到问题，麻烦各位大佬给点调整思路，提前谢谢啦！

备注：内容来源于stack exchange，提问作者Jeffrey Generalao