WordPress站点移动端菜单展开时移除汉堡图标需求

嗨，我来帮你搞定这个菜单图标重复显示的问题！这是因为你手动替换汉堡图标后，没有给激活状态的菜单按钮添加对应的样式来隐藏汉堡图标。我们可以通过几步简单的CSS调整解决：

1. 找到菜单激活时的专属类名

   • 打开网站的移动端视图，点击菜单按钮打开激活状态的菜单。
   • 右键点击汉堡图标，选择浏览器的“检查元素”功能（Chrome/Firefox里都有这个选项）。
   • 查看这个按钮元素的HTML代码，找到菜单激活后新增的类名——通常是类似 active、toggled 或者 menu-open 这类标识状态的类。比如你可能会看到元素变成 <button class="menu-mobile-toggle active">。

2. 添加自定义CSS隐藏激活状态的汉堡图标
   根据你找到的激活类名，添加下面的CSS代码：

   /* 把 `.active` 替换成你实际查到的激活类名 */
   .menu-mobile-toggle.active {
       background-image: none !important; /* 移除汉堡背景图 */
   }
   

   如果你的关闭按钮是单独的元素（不是同一个按钮切换图标），那可以直接隐藏激活状态的汉堡按钮：

   .menu-mobile-toggle.active {
       display: none !important;
   }
   

   要是你希望同一个按钮在激活时直接换成关闭图标，也可以这么写：

   .menu-mobile-toggle.active {
       background-image: url("你的关闭图标本地路径") !important;
       background-repeat: no-repeat;
       background-size: contain; /* 保证图标适配按钮大小 */
   }
   

3. 在WordPress中应用这段CSS
   你有两种简单的方式添加代码：

   • 进入WordPress后台 → 外观 → 自定义 → 额外CSS，把代码粘贴进去后点击保存。
   • 如果你用了子主题，可以直接把代码加到子主题的 style.css 文件里（推荐这种方式，避免主题更新后丢失修改）。

小提示 #

要是不确定找到的类名对不对，可以把菜单激活时的按钮HTML片段贴出来，我能帮你更精准地调整代码。另外，!important 是为了确保自定义样式能覆盖主题原有的规则，要是去掉后也能生效，就不用加啦。

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