RGB MMA网站导航栏未显示问题及<header>内容查看方法求助

导航栏不显示的常见排查点 #

• 先确认<header>标签拼写正确，有没有和<head>混淆，标签是否正常闭合
• 固定导航必须配置CSS定位属性：给<header>设置position: fixed; top: 0; left: 0; width: 100%;，同时加z-index: 999;确保它在页面最上层，不被其他元素遮挡
• 检查导航栏文字颜色和背景色是否撞色，比如背景为白色、文字也为白色，直接调整color属性修改文字颜色即可
• 排查CSS中是否给<header>或导航容器添加了display: none或visibility: hidden属性，这两个属性会直接让元素隐藏
• 确认导航项的HTML结构无错误，标准参考结构如下：

<header style="position: fixed; top: 0; width: 100%; background: #222; color: #fff; padding: 1rem; z-index: 999;">
  <h1>RGB MMA</h1>
  <nav>
    <ul style="list-style: none; display: flex; gap: 2rem; margin: 0;">
      <li><a href="#home" style="color: #fff; text-decoration: none;">Home</a></li>
      <li><a href="#about" style="color: #fff; text-decoration: none;">About</a></li>
      <li><a href="#join" style="color: #fff; text-decoration: none;">Join us</a></li>
      <li><a href="#timetable" style="color: #fff; text-decoration: none;">Time table</a></li>
    </ul>
  </nav>
</header>

• 检查<header>是否设置了合适的高度，或者内部元素的margin/padding是否过大，导致元素被挤出可视区域

查看<header>标签内容的方法 #

• 打开浏览器开发者工具：按下F12快捷键，或者右键页面空白处选择「检查」
• 在Elements（Chrome/Edge）或Inspector（Firefox）面板中，直接在DOM树里找到<header>标签，点击即可展开查看内部所有内容
• 如果找不到<header>，可以用控制台搜索：切换到Console面板，输入document.querySelector('header')回车，点击返回的结果，会自动跳转到Elements面板对应的<header>位置
• 也可以直接打印内容：在Console面板输入console.log(document.querySelector('header').innerHTML)，就能直接看到<header>的内部HTML代码

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