WordPress站点菜单被截断，使用display:flex后菜单项单列排列如何修复

设置display: flex后菜单项变为单列，核心原因是flex容器默认继承了flex-direction: column属性，或是未配置溢出换行规则导致菜单项被挤压向下排列，可按照以下步骤排查修复：

步骤1：修正菜单容器的flex配置 #

先定位你的站点菜单容器对应的CSS选择器，常见WordPress主题的菜单容器选择器为.nav-menu、.primary-menu、.wp-block-navigation，替换你之前添加的flex相关代码为以下配置：

/* 请将下面的 .primary-navigation 替换为你实际的菜单容器选择器 */
.primary-navigation {
  display: flex;
  flex-direction: row; /* 强制菜单项横向排列，避免单列 */
  flex-wrap: wrap; /* 空间不足时自动换行，不会出现截断 */
  gap: 1.5rem; /* 控制菜单项横向间距，可根据需求调整数值 */
  justify-content: flex-start; /* 菜单项对齐规则，可选值为center/space-between/space-around */
  overflow: visible !important; /* 关闭容器溢出隐藏规则，避免截断菜单 */
}

如果调整后菜单项出现挤压变形，为菜单项添加防收缩规则：

/* 请将 .menu-item 替换为你实际的菜单项选择器 */
.primary-navigation .menu-item {
  flex-shrink: 0; /* 禁止菜单项被挤压缩小 */
  white-space: nowrap; /* 菜单项文字强制不换行 */
}

步骤2：排查父容器宽度限制 #

菜单截断大概率存在父级导航容器的宽度限制规则，找到导航栏的父容器（常见选择器为.site-header、.header-wrapper），调整相关配置：

/* 请将 .site-header 替换为你实际的导航父容器选择器 */
.site-header {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 2rem; /* 保留左右内边距避免菜单贴边，可自行调整数值 */
  overflow-x: visible !important;
}

步骤3：移动端适配（可选） #

如果移动端依然存在截断问题，添加媒体查询规则适配小屏设备：

@media screen and (max-width: 768px) {
  .primary-navigation {
    gap: 1rem; /* 缩小移动端菜单项间距 */
  }
  /* 若移动端菜单项数量过多放不下，可直接在WordPress后台-外观-菜单中开启系统自带的汉堡移动菜单 */
}

生效验证 #

修改完成后，依次清除WordPress站点缓存（若使用缓存插件）、浏览器缓存，刷新页面验证修复效果即可。

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