I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework.
The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices.
However, I am not completely satisfied with the default position of the collapsed navbar items. I would prefer them to appear below the logo rather than right next to it as shown in this screenshot:
As the screen width decreases, the issue becomes more pronounced:
The navbar collapses when the width reaches 767px. While exploring the Bootstrap CSS files, I noticed several @media queries but I am unsure which one will help me achieve the desired layout where the navbar items drop below the logo when collapsed.
Below is the navigation section of my HTML code (CSS and JS are linked from the Bootstrap files).
<header>
<!-- navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PAGE 1</a></li>
<li><a href="#">PAGE 2</a></li>
<li><a href="#">PAGE 3</a></li>
<li><a href="#">PAGE 4</a></li>
<li><a href="#">PAGE 5</a></li>
</ul>
</div>
</div>
</div>
</header>