WordPress导航菜单背景从单色改为双色的实现方法咨询

Hey there! 完全不用纠结自定义图片的适配问题，纯CSS就能搞定导航菜单的双色背景，而且完美适配各种屏幕和浏览器窗口尺寸。下面给你两种实用方案，按需选择：

方案一：线性渐变（快速实现左右分色） #

这是最简单的方法，直接给导航菜单容器加线性渐变背景，精准控制两种颜色的占比：

/* 假设你的导航菜单容器类是 .main-navigation */
.main-navigation {
  /* 从左到右，黑色占50%，黄色占50% */
  background: linear-gradient(to right, #000000 50%, #FFFF00 50%);
  /* 确保背景铺满容器，不会重复 */
  background-size: 100% 100%;
}

• 调整百分比就能改变颜色占比，比如想黑色占40%、黄色占60%，就改成 #000000 40%, #FFFF00 40%（注意第二个颜色的起始点和第一个的结束点一致，避免过渡模糊）
• 如果你的导航有内边距（padding），这个方法依然有效，背景会自动铺满整个容器

方案二：Flex分栏（精准控制分区内容） #

如果需要让菜单项明确划分在黑色/黄色区域里（比如左侧菜单项在黑背景，右侧在黄背景），用Flex布局更合适：

/* 导航容器设为Flex布局 */
.main-navigation {
  display: flex;
  width: 100%;
}

/* 左侧黑背景区域 */
.nav-left-section {
  background: #000000;
  flex: 1; /* 占容器一半宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 右侧黄背景区域 */
.nav-right-section {
  background: #FFFF00;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 调整文字颜色，确保可读性 */
.nav-left-section a {
  color: #FFFFFF;
  margin: 0 15px;
}

.nav-right-section a {
  color: #000000;
  margin: 0 15px;
}

• 你需要在WordPress后台的菜单编辑界面，把菜单项分别添加到两个自定义菜单（比如“左侧菜单”和“右侧菜单”），然后在主题的导航位置调用这两个菜单，对应上面的.nav-left-section和.nav-right-section容器
• 这种方式的好处是菜单项不会跨颜色区域，布局更规整，适合有明确分区需求的场景

怎么在WordPress里添加这些CSS？ #

1. 登录WordPress后台，进入「外观」→「自定义」
2. 找到「额外CSS」选项，把上面的代码粘贴进去，点击「发布」即可生效
3. 如果用子主题，也可以把代码添加到子主题的style.css文件里，避免主题更新时丢失修改

提示：如果不知道导航容器的类名，可以用浏览器的「检查元素」功能（右键菜单→检查）查看导航菜单的HTML结构，找到对应的容器类。

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