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;
}
}该规则位于 <head> 中 ID 为 page-skin-1 的 <style> 标签内——这是 Blogger 主题常用的内联样式容器，由第三方模板自动生成。
✅ 安全修复方案
只需从上述媒体查询中移除 #top-bar，保留其他需隐藏的元素即可。修改后代码如下：
@media screen and (max-width: 980px) {
.header-logo, .header-menu {
display: none;
}
}⚠️ 操作注意事项
- 切勿直接编辑模板 HTML 中的 page-skin-1 标签：它可能被 Blogger 自动重写。推荐方式是：进入 Blogger 后台 → 「主题」→ 「自定义」→ 「高级」→ 「添加 CSS」，将修正后的规则粘贴进去（Blogger 会将其追加并优先级覆盖原样式）。
- 若主题已使用 !important 强制隐藏，可在新增 CSS 中显式恢复显示：
@media screen and (max-width: 980px) { #top-bar { display: block !important; visibility: visible !important; } } - 修改后务必清除浏览器缓存，并在真机上测试不同屏幕宽度（如 480px、768px、980px）以验证兼容性。
? 延伸建议
为提升移动端体验，可进一步优化 #top-bar 的响应式表现，例如：
- 添加 flex-wrap: wrap 和 justify-content: center 实现社交图标水平居中；
- 对小屏设置 font-size: 14px 和 padding: 8px 12px 防止文字溢出；
- 考虑为触控友好性增加最小点击区域（min-height: 44px）。
只要避免全局隐藏关键导航容器，就能在保持主题原有设计逻辑的同时，让移动端用户顺畅访问核心页面入口。
