WordPress移动端首页出现重复双层菜单该如何隐藏？

修复方案 #

CSS快速修复

你之前写的:nth-child(3) {display: none;}失效是因为没有限定生效范围、优先级不足，按以下步骤调整：

• 打开浏览器F12开发者工具，切换移动端模拟模式，用元素选择器选中重复的第二层菜单，复制该元素的完整CSS选择器
• 将以下规则替换掉你之前写的CSS，添加到主题「自定义」→「额外CSS」面板中：

/* 768px可替换为你主题的移动端断点数值，.mobile-nav替换为你复制到的菜单选择器 */
@media (max-width: 768px) {
  body.home .mobile-nav:nth-of-type(2) {
    display: none !important;
  }
}

规则说明：body.home限定仅首页生效，nth-of-type()比nth-child()匹配精度更高，!important用于覆盖主题默认的菜单显示样式，无需可删除。

根源代码修复

故障原因确实是首页模板重复调用了菜单，可按以下步骤排查彻底解决：

• 进入WordPress后台→外观→主题文件编辑器，打开根目录下的index.php，检查除了<?php get_header(); ?>外是否有多余的wp_nav_menu()菜单调用代码，直接删除重复项即可
• 若index.php无异常，打开header.php检查菜单输出逻辑，是否存在误加的is_home()首页判断条件，导致首页多输出一次菜单

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