使用justify-content: space-between后移动端关闭按钮消失求助

问题根源 #

你的移动端导航容器.mobile-nav错误使用了vh（视口高度）作为宽度单位，导致容器宽度等于屏幕高度，在竖屏设备上横向超出可视区域，关闭按钮被挤到屏幕外，加上justify-content: space-between后完全不可见。

修复方案 #

1. 修正导航容器宽度单位
   将.mobile-nav的width: 100vh改为width: 100vw（视口宽度单位），确保容器宽度适配屏幕宽度：

   .mobile-nav{
       position: fixed;
       width: 100vw; /* 替换100vh为100vw */
       height: 100vh;
       background-color: white;
       padding: 24px;
       display: none;
       transform: translateX(-100%); /* 取消注释，初始隐藏菜单 */
       transition: transform 300ms ease-in-out; /* 取消注释，添加过渡动画 */
   }
   

2. 恢复菜单切换的JS功能
   你注释掉了菜单切换的JavaScript代码，取消注释才能实现点击菜单/关闭按钮时的显示/隐藏逻辑：

   <script>
       function toggleMobileNavigation()
       {
           var element = document.getElementById("mobile-nav");
   
           if (element.classList.contains("mobile-nav-open"))
           {
               element.classList.remove("mobile-nav-open");
           }
           else
           {
               element.classList.add("mobile-nav-open");
           }
       }
   </script>
   

3. 验证移动端菜单初始状态
   确保.mobile-nav初始通过transform: translateX(-100%)隐藏，只有添加mobile-nav-open类时才通过transform: translateX(0)显示，这样页面加载时不会直接显示移动端菜单。

额外优化建议 #

• 给.mobile-nav添加left: 0属性，确保它从屏幕左侧开始定位，避免偏移问题；
• 移动端下可调整header布局，让菜单按钮和"Get Started"按钮合理分配空间，避免拥挤。

内容的提问来源于stack exchange，提问作者7th Ward