Responsive navbar in Bootstrap - css

Question

I am currently using bootstrap with my website and am trying to take advantage of the responsive features, one of which is the navbar button on smaller screens/devices. Now I have made some changes to the navbar, one of which is centering it rather than the default float left and it looks like this:
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class =active >Home</li>
<li class="dropdown" id="menu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu">Our Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Registered Care</a></li>
<li>Supported Living</a></li>
<li>Vocational Services</a></li>
<li>Outreach Support</a></li>
<li>Day Activities</a></li>
<li>Therapeutic Services</a></li>
</ul>
</li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Our Homes<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Ty Newydd</a></li>
<li>Sandpiper</a></li>
<li>Woodside</a></li>
</ul>
</li>
<li class="dropdown" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">Our Team<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Our Team</a></li>
<li>Staff Vacancies</a></li>
</ul>
</li>
<li class = >Gallery</li>
<li class = >FAQ</li>
<li class = >News</li>
<li class="dropdown" id="menu4">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu4">Feedback<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Quality Reports</a></li>
<li>Care Standards</a></li>
<li>Testimonials</a></li>
</ul>
</li>
<li class = >Contact Us</li>
<li class="dropdown" id="menu3">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu3">Login<b class="caret"></b></a>
<ul class="dropdown-menu">
<div id="loginbox">
<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="5174LhGldMFczTwLf9sB+I5NKs3I0rLxGoA6xq1GKKs=" /></div>
<div><label for="user_email">Email</label><br />
<input id="user_email" name="user[email]" size="30" type="email" value="" /></div>
<div><label for="user_password">Password</label><br />
<input id="user_password" name="user[password]" size="30" type="password" /></div>
<div><input name="user[remember_me]" type="hidden" value="0" /><input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1" /> <label for="user_remember_me">Remember me</label></div>
<div><input name="commit" type="submit" value="Sign in" /></div>
</form>
</div>
</ul>
</li>
</div>
</div>
</ul>
</div>
</div>
</div>
For a live example you can visit
http://46.32.253.11/ .
I'm guessing as I have centered everything in my navbar then it has carried across into the nav.collapse, but I am unsure on how to get it to behave in the default way without effecting my navbar. What I would like is to have all the links align to the left within the navbar button instead of all in the center as they currently are
Whilst on the subject of the nav collapse, does any one know of any ways to customise it, for example list all the headings and then perhaps click to reveal all sub headings? Just a thought there. Anyway if anyone can offer any assistance with this it would be much appreciated

Answer 1

Apply your override with a media query
#media (min-width: 768px) {
.navbar.center {
...
}
}
The navbar will be centered from 768px and after.