WordPress主题迁移后Safari下CSS media query控制菜单显示异常求助

为提升网站访问速度，当前正在将WordPress站点从Astra主题搭配Elementor迁移至Kadence主题搭配古腾堡编辑器，以获得更好的SEO表现。

• 新版本暂存站点地址：https://staging2.dearreal.com
• 测试账号：pawpatrol
• 测试密码：ninjagolego

• 桌面端头部菜单样式异常：用于设置菜单字体样式的CSS在Safari浏览器中不生效，Chrome浏览器中也偶现异常表现
• 移动端侧边菜单优化需求：当前「点击外部区域关闭」功能通过给点击区域左右各加1000px的hack方式实现，需要调整为动态拉伸至屏幕边缘的更优方案

1. 桌面端菜单样式异常修复 #

异常原因主要有两点：一是父级菜单容器未显式声明flex布局，导致Safari不识别子元素的flex-grow属性；二是样式优先级低于Kadence主题默认样式，且伪类顺序不符合LVHA（link→visited→hover→active）规范导致偶发失效。
修复调整如下：

1. 给#primary-menu显式添加display: flex声明，兼容Safari的flex布局规则
2. 提升选择器优先级，添加body前缀覆盖主题默认样式
3. 调整伪类顺序，避免覆盖失效

2. 移动端点击外部关闭功能优化 #

抛弃固定数值的hack方案，直接利用视口定位实现全屏幕覆盖：

1. 将关闭按钮的定位设置为fixed且铺满整个视口
2. 伪元素直接继承父级宽高实现全屏幕点击区域，自动适配所有屏幕尺寸
3. 保留菜单和关闭按钮的层级优先级，不影响原有交互

修改后的完整CSS代码如下：

/* primary menu links */
body #primary-menu {
  display: flex;
  width: 100%;
}
body #primary-menu li {
  flex-grow: 1;
}


/* desktop */
@media only screen and (min-width: 842px) {
  body .mainmenu-link-css a,
  body .mainmenu-link-css a:visited {
    color: #2D3748;
    display: block;
    flex-grow: 1;
    text-align: center;
  }
  body .mainmenu-link-css a:hover,
  body .mainmenu-link-css a:active {
    color: #A74646;
    display: block;
    flex-grow: 1;
  }
  /* 其他不相关样式保留 */
}


/* mobile */
/* formating mobile menu */
@media only screen and (max-width: 842px) {
  body .mainmenu-link-css a,
  body .mainmenu-link-css a:visited {
    color: rgba(255, 255, 255, 1) !important;
    text-align: center;
    font-size: 22px !important;
  }
  body .mainmenu-link-css a:hover,
  body .mainmenu-link-css a:active {
    color: rgba(255, 255, 255, 1) !important;
  }
  .popup-drawer .drawer-overlay,
  .popup-drawer-layout-fullwidth .drawer-inner {
    background-color: rgba(0, 0, 0, 0.0) !important;
  }
  .menu-toggle-close {
    background-color: rgba(255, 255, 255, 1) !important;
    /* 新增：让关闭按钮铺满整个视口作为点击区域载体 */
    position: fixed !important;
    inset: 0 !important;
    height: auto !important;
    width: auto !important;
    /* 调整层级低于菜单，高于页面内容 */
    z-index: 2 !important;
  }
  .toggle-close-bar {
    color: rgba(0, 0, 0, 1) !important;
    /* 确保叉号显示在可视区域右上角 */
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .popup-drawer .drawer-header {
    min-height: 80px;
  }
  /* 优化点击外部关闭区域 */
  button.menu-toggle-close:after {
    content: '';
    position: absolute;
    /* 直接铺满整个父级按钮，自动适配所有屏幕尺寸 */
    inset: 0;
    z-index: 1;
  }
  .drawer-menu-container {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 3;
  }
  /* 其他不相关样式保留 */
}

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