The menu and toggle button are working perfectly on Android browsers, but there seems to be an issue on iOS devices...
When I click the button, the menu shows up briefly and then disappears immediately.
I've tried various workarounds such as disabling touchstart in bootstrap.js or adjusting the z-index of the navbar, but nothing has solved the problem.
After clicking the toggle button, the menu appears but it is not visible. I have to tap the button again to close the menu and then reopen it.
If you have an iPhone, you can test it at
Thank you for looking into this issue for me.
<div id="header-wrapper" class="header fadeIn">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid row">
<div class="navbar-header">
<a class="navbar-brand" href="index.html#top"></a>
</div>
<div class="navbar-footer">
<a href='order.php' class='navbar-preorder'>PRE ORDER</a>
<!-- hamburger icon -->
<button type="button" class="navbar-toggle collapsed menu-btn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<!-- <span class="icon-bar middle-bar"></span>-->
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="collapse navbar-collapse main-menu">
<ul class="nav navbar-nav">
<li>
<a href="index.html#alexa">Alexa</a></li>
<li>
<a href="index.html#technology">Technology</a></li>
<li id="spin">
<a href="index.html#techspec">Tech Specs</a></li>
<li>
<a href="index.html#faq">FAQ</a></li>
<li>
<a href="http://blog.getheadsup.com/">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>