Bootstrap导航阻止其上方标题中的链接

Question

这不是“粘性菜单”问题。这不是“导航阻止自身”的问题。这是“导航覆盖导航上方DOM中的任何内容”问题。

<header>
  <a href="#"><img src="social.png"></a>
  <a href="#"><img src="myLogo.png"></a>
  <a href="#"><img src="thingy.png"></a>
</header>

<nav class="navbar navbar-default center">
  <div class="container-fluid">
    <div class="navbar-top">
      ... all the rest of the bootstrap nav crap ...
    </div>
  </div>
</nav>

因此图像上的链接被阻止。导航组件神奇地到达页面顶部，即使我在<a>或<img>上设置索引，它仍然不会触发。

填充身体不起作用，因为没有隐藏任何东西，我对布局感到满意。对于那些需要视觉的人，请点击此处：

蓝色区域是<nav>（标记为绿色）的一部分，位于DOM中<header>的下方......这对我来说毫无意义。并且无论图像位于何处，或者图像的大小，<nav>仍会覆盖它。

我怎么解决这个问题？很明显我希望能够点击这些链接然后去......但是<nav>完全阻止它们。