Blogger 使用第三方主题时，顶部导航栏在桌面端正常显示但在移动端隐藏，通常是因响应式 CSS 规则错误地将 #top-bar 设为 display: none 所致；本文提供精准定位与安全修改方案。
blogger 使用第三方主题时，顶部导航栏在桌面端正常显示但在移动端隐藏，通常是因响应式 css 规则错误地将 `#top-bar` 设为 `display: none` 所致；本文提供精准定位与安全修改方案。
在 Blogger 博客中，尤其是采用第三方定制主题时，开发者常通过媒体查询（Media Query）控制不同屏幕尺寸下的元素显隐。你遇到的“顶部导航栏（如 About Us、Contact Us、社交图标等）在手机端完全不可见”问题，根本原因并非代码缺失或 HTML 结构错误，而是 CSS 层面的响应式规则主动隐藏了该区域。
通过检查你提供的博客源码（https://www.php.cn/link/b78488f85a5c6a2c19698a4777b06019），可定位到 <head> 中一个 ID 为 page-skin-1 的 <style> 标签，其中包含如下关键样式：
@media screen and (max-width: 980px) {
#top-bar, .header-logo, .header-menu {
display: none;
}
}⚠️ 注意：该规则在屏幕宽度 ≤ 980px（覆盖绝大多数平板与全部手机）时，无差别隐藏 #top-bar、.header-logo 和 .header-menu。而你的顶部导航栏恰好使用 id="top-bar"，因此被一并隐藏。
✅ 正确解法是——仅保留对 .header-logo 和 .header-menu 的隐藏，移除对 #top-bar 的影响。修改后代码如下：
@media screen and (max-width: 980px) {
.header-logo, .header-menu {
display: none;
}
}? 操作步骤（Blogger 后台）：
- 登录 Blogger → 左侧菜单点击「主题」→「编辑 HTML」；
- 按 Ctrl + F（Windows）或 Cmd + F（Mac）搜索 page-skin-1，定位到该 <style> 块；
- 找到含 #top-bar 的 @media 规则，删除其中的 #top-bar,（注意保留逗号后的空格）；
- 保存主题。刷新手机端页面即可验证顶部导航栏恢复显示。
? 补充建议：
- 修改前请务必点击「备份主题」，以防误操作；
- 若后续需进一步优化移动端体验（如将 #top-bar 改为汉堡菜单），建议添加独立的移动适配结构，而非依赖全局隐藏/显示；
- 避免直接修改第三方主题的 JS 文件或核心模板逻辑，优先通过 CSS 覆盖（Custom CSS）方式干预，便于未来升级维护。
此方案直击问题根源，无需额外插件或复杂调试，适用于绝大多数基于 CSS 媒体查询隐藏导航的 Blogger 第三方主题。
