移动端汉堡菜单宽度超出屏幕问题求助（WordPress+Elementor）

问题背景 #

使用WordPress+Elementor免费版+付费主题定制移动端头部菜单时，深蓝色汉堡菜单宽度超出屏幕尺寸，尝试设置.navbar.menu-style-flyout .navbar-inner的width和max-width为100%无效，且该问题仅在真实手机上出现，桌面端开发者工具无法复现。

解决方案 #

• 确认Viewport设置：检查主题的<head>区域是否包含正确的viewport元标签，确保移动端布局自适应：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  若缺失或参数错误，会导致移动端视口计算异常，引发菜单溢出。

• 添加针对性移动端CSS：通过媒体查询强制限制菜单容器宽度，覆盖主题默认样式：

  @media only screen and (max-width: 767px) {
    /* 修复菜单容器溢出 */
    .navbar.menu-style-flyout {
      width: 100vw !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }
    /* 修复菜单内部容器宽度 */
    .navbar.menu-style-flyout .navbar-inner {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }
  }
  

  说明：

  • 100vw确保容器占满当前视口宽度
  • !important强制覆盖主题自带的优先级更高的样式
  • box-sizing: border-box避免padding/margin撑大容器宽度
  • overflow-x: hidden隐藏横向溢出内容

• 排查冲突元素：使用Chrome远程调试功能连接真实手机，检查菜单内的子元素是否设置了固定宽度、负margin或超出容器的内容，针对性调整这些元素的样式。

内容的提问来源于stack exchange，提问作者Ionita Gabriel