I have created a bootstrap responsive navigation menu that collapses into a box when the page is resized. It's a standard menu with bootstrap, but I'm facing an issue where the menu automatically appears when the page gets small instead of needing to click the toggle box. Any suggestions on how to resolve this?
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse" collapse">
<div id="navigation">
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Budget Tracker</a></li>
<li><a href="#">Interactive Globe</a></li>
<li><a href="#">Travel Quiz</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</div>
This code snippet shows my collapsible bootstrap menu.
Additionally, does anyone know how to center the toggle box in the middle of the screen instead of having it on the right side?