很多使用 WordPress 子比主题搭建网站的站长，应该都留意到顶部导航菜单悬浮或者选中的时候，菜单项上方会出现一条彩色圆角小横条提示。这个是子比主题自带的导航高亮标识，有不少朋友觉得这条横条比较突兀，让导航栏看着不够清爽简洁。下面分享一段自定义 CSS 代码，无需修改主题源文件，直接后台粘贴代码就可以把导航上方的小横条彻底隐藏掉。

效果预览

原版子比主题导航，鼠标悬浮以及当前页面选中的导航菜单上方，会显示一条彩色圆角横向高亮条。部署完成代码之后，该提示横条直接消失，导航栏整体变得干净简约；导航的点击、悬浮变色等原有交互效果全部保留，不会对网站导航功能造成任何影响。

部署前重要提醒

1、本教程只需要添加自定义 CSS 样式，不需要修改主题函数文件；
2、保存代码之后，务必清理 WordPress 站点缓存、CDN 缓存以及浏览器缓存；
3、如果网站之前已经粘贴过大量导航相关美化 CSS，有可能出现样式冲突导致代码失效；
4、子比主题后续大版本更新之后，导航的 css 类名可能改动，会造成美化效果失效。

添加自定义 CSS 样式代码

登录网站后台，进入子比主题设置，找到【自定义 CSS】输入框，把下面的 CSS 完整复制粘贴进去保存即可。

备用增强版代码（解决优先级不足失效）

自定义修改说明

• 如果想调整横条而不是直接隐藏：修改 opacity 后面的数值，0 为完全隐藏，0‑1 之间可以设置半透明；
• 想要修改原横条的颜色：修改 background 后面的色值即可；
• 如果你希望只在移动端隐藏横条，可以外面套上移动端媒体查询；
• 直接粘贴到子比后台自定义 CSS，不建议放到子主题 style.css 里面。

注意事项

• 仅适配官方原版子比主题；魔改二次修改过的主题有可能类名不一样，代码会失效；
• 纯 CSS 美化，不会增加网站的请求，对页面加载速度几乎没有影响；
• 升级子比主题之后如果导航样式发生改动，本美化效果有可能失效；
• 保存代码之后记得 Ctrl+F5 强制刷新浏览器页面预览效果。

常见问题

粘贴保存完，导航上方小横条依旧还在？

优先强制刷新浏览器 Ctrl+F5，清理网站缓存和 CDN 缓存；清理缓存之后还是无效，直接替换使用上面的增强版！important 代码，提升样式优先级即可。

隐藏横条之后导航悬浮变色效果消失了怎么办？

该代码只针对导航上方那条横条进行隐藏，理论上不会影响悬浮文字变色；如果悬浮效果异常，大概率是和站点内其他导航美化 CSS 冲突，需要检查其他自定义样式。

升级子比主题之后，隐藏效果失效怎么处理？

主题升级之后官方有可能修改导航对应的 css 类名；先尝试增强版代码，增强版依旧无效就需要等待更新适配新的代码。