Unfortunately, I'm facing a challenge with Bootstrap 2 in my current project. I am having difficulty getting the logo (.brand) and navigation toggle to be on the same line when the navbar collapses to the 'phone' level.
I attempted changing the .row to .row-fluid, but the .span6 elements still collapse and span the entire width of the navbar once it reaches 'phone' size.
Below is the current markup I am working with:
<div id="header-row">
<div class="container">
<div class="row-fluid">
<!--LOGO-->
<div class="span3"><a class="brand" href="/"><img src="img/logo.png"/></a></div>
<!-- /LOGO -->
<!-- MAIN NAVIGATION -->
<div class="span9">
<div class="navbar pull-right">
<div class="navbar-inner">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li<?php if($current_file == 'index.php') {echo ' class="active"';}?>><a href="/">Home</a></li>
<li><a href="/#payback-time">Payback Time</a></li>
<li<?php if($current_file == 'funding.php') {echo ' class="active"';}?>><a href="/funding.php">Funding Options</a></li>
<li<?php if($current_file == 'supply-and-installation.php') {echo ' class="active"';}?>><a href="/supply-and-installation.php">Supply and Installation</a></li>
<li<?php if($current_file == 'contact.php') {echo ' class="active"';}?>><a href="/contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- MAIN NAVIGATION -->
</div>
</div>
</div>
Additionally, I have customized some navbar properties based on the theme I am using:
#header-row{
background: #f5f5f5;
border-bottom:1px solid #eee;
padding: 15px 0;
}
#header-row .navbar{margin:10px 0 0 0;}
#header-row .navbar .navbar-inner{
border:none;
box-shadow: none;
margin: 0;
background: transparent;
}
#header-row .navbar .navbar-inner ul.nav > li > a{
box-shadow: none;
background: transparent;
color: #90c57b;
}
#header-row .navbar .navbar-inner ul.nav li.active a{
color: #333;
}Live code demo