Blogger 使用第三方主题时，顶部导航栏（如“关于我们”“联系我们”等）在桌面端正常显示，却在手机视图中被意外隐藏——根本原因通常是 CSS 媒体查询中错误地将 #top-bar 设为 display: none。本文提供精准定位与安全修改方案。

blogger 使用第三方主题时，顶部导航栏（如“关于我们”“联系我们”等）在桌面端正常显示，却在手机视图中被意外隐藏——根本原因通常是 css 媒体查询中错误地将 `#top-bar` 设为 `display: none`。本文提供精准定位与安全修改方案。

当你在 Blogger 移动端访问博客（例如 https://www.php.cn/link/b78488f85a5c6a2c19698a4777b06019）时发现顶部导航栏（#top-bar）消失，而桌面端一切正常，这几乎可以确定是主题 CSS 中的响应式规则导致的。问题根源并非 HTML 结构缺失，而是样式层面对该元素进行了无差别隐藏。

? 准确定位问题代码
通过浏览器开发者工具（Chrome 中按 F12 → 切换至「手机模拟」→ 检查顶部区域），可快速定位到如下关键 CSS 规则：

@media screen and (max-width: 980px) {
  #top-bar, .header-logo, .header-menu {
    display: none;
  }
}

该规则位于

中 ID 为 page-skin-1 的