I'm encountering a problem with my bootstrap 3 mobile menu - it is opening underneath the content of my first section. Once you scroll down, it works fine, but on the first section, this issue persists.
You can check out the problem here. Simply reduce the screen size until the mobile menu button appears.
Below is the HTML code 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've gone through my files again and can't identify anything causing this issue. Has anyone else experienced this before?