html - Bootstrap移动菜单打开第一部分内容

好的，我的bootstrap 3移动菜单有问题，它在我的第一部分内容下打开。在向下滚动之后，它就可以正常工作了，在第一部分就出现了这个问题。
You can see the issue here.只需减小屏幕大小，直到您看到移动菜单按钮。
这里还有我的导航HTML：

<div class="navbar">

<div class="container">

    <div class="navbar-header">

        <!-- Brand -->
        <a href="javascript:void(0);" class="navbar-brand scroll-top"><img class="logo" width="45" height="45" alt="lightning bolt logo" src="img/logo.png"></img></a>

        <!-- Mobile Navigation -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="ion-navicon toggle-icon"></span>
        </button>

    </div>

    <!-- Main Navigation -->
    <nav class="collapse navbar-collapse navHeaderCollapse" id="myScrollSpy" role="navigation">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#section1" data-id="section1" class="scroll-link">Home</a></li>
            <li><a href="#section2" data-id="section2" class="scroll-link">Portfolio</a></li>
            <li><a href="#section3" data-id="section3" class="scroll-link">About</a></li>
            <li><a href="#section4" data-id="section4" class="scroll-link">Team</a></li>
            <li><a href="#section5" data-id="section5" class="scroll-link">Services</a></li>
            <li><a href="#section6" data-id="section6" class="scroll-link">Contact</a></li>
        </ul>
    </nav>

</div>

</div>

我已经仔细检查了我的文件，没有造成这个问题，以前有人遇到过这个问题吗？

最佳答案

将z-index: 9999;样式添加到.navbar类应该是有效的。第一部分的内容与导航栏重叠。添加一个足够高的z-index确保它位于页面上的其他元素之上。

.navbar {
    z-index: 9999;
}