Bootstrap navbar toggle icon bar sliding underneath logo in header when resized
I have a bootstrap navbar fixed top that is using the navbar toggle icon bar. When I resize the browser the icon bar is pushed below the logo which makes the nav bar taller, I need it to force the logo to resize because it's using the img-responsive class and keep the navbar 50px tall. I tried setting the wrapper Div to overflow:auto which someone on here suggested in another question but that didnt work.
HTML
<div style="overflow:auto;">
<nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
<div class="header-full-title img-responsive">
<img src="/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="navbar-collapse collapse">
<ul class=" nav navbar-nav navbar-right">
<li><a href="#" class="navStyle">OUR STORY</a></li>
<li><a href="#" class="navStyle">VISIT</a></li>
<li><a href="#" class="navStyle">DIRECTORY</a></li>
<li><a href="#" class="navStyle">CONDOS</a></li>
<li><a href="#" class="navStyle">APARTMENTS</a></li>
<li class="dropdown">
<a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EVENTS</a>
<ul class="dropdown-menu dropDownMTC pull-right">
<li><a href="#">YOGA ROCKS THE PARK</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">MONDAY NIGHT MOVIES</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">HORSES OF HONOR</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">THURSDAY IN THE PARK</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">EVENT SHUTTLE</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">HOLIDAY LIGHTS FESTIVAL</a></li>
</ul>
</li>
<li><a href="#" class="navStyle">NEWS</a></li>
</ul>
</div>
</nav>
</div>
Now, if you are talking in terms of the wrapping. Remember that there are often scenarios where things may not look the way you want them to at certain sizes, but the goal is to focus on common screen dimensions as there is a good chance nobody may ever see the issue. You can use Chrome's built-in emulator to test different device dimensions, or a number of web-based utilities.
Secondy, if the header image is intended to be a logo or brand-image, you can always leverage Bootstrap's built-in class
.navbar-brand上一篇: 移动设备中的Bootstrap透明导航栏