Bootstrap mobile menu opening behind first section content

Question

Okay I am having an issue with my bootstrap 3 mobile menu, it is opening under my first section content. After you scroll down it works fine, it just has that issue on the first section.

You can see the issue here. Just reduce the screen size till you see the mobile menu button.

Also here is my html for my nav:

<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 have double checked my files and nothing is causing this, anyone ran into this issue before?

Answer 1

Adding z-index: 9999; style to .navbar class should work. The content from first section is overlapping with the navbar. Adding a high enough z-index makes sure that it'd be above every other element on the page.

.navbar {
    z-index: 9999;
}