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

Question

好吧,我的bootstrap 3移动菜单有问题,它在我的第一部分内容下打开.向下滚动它工作正常,它只是在第一部分有这个问题.

你可以在这里看到问题.只需缩小屏幕尺寸,直到看到移动菜单按钮.

这也是我的导航的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;
}