Bootstrap 移动菜单在第一部分内容后面打开

Question

好的，我的 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>

我已经仔细检查了我的文件，没有任何原因导致此问题，以前有人遇到过这个问题吗？

Answer 1

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

.navbar {
    z-index: 9999;
}