The initial mobile download menu for the contents of the first section

Question

Well, I have a problem with my mobile bootstrap menu 3, it opens under my first section content. After you scroll down, it works fine, it just has a problem in the first section.

You can see the problem here. Just reduce the screen size until you see the button on the mobile menu.

Also here is my HTML for my navigation:

<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>

I double-checked my files and it didn’t lead to anything, has anyone encountered this problem before?

Answer 1

z-index: 9999; .navbar . . z-index , .

.navbar {
    z-index: 9999;
}

Answer 2

z-index 9999, navbar . . z-index 9999, .