How do I align elements in bootstrap's nav bar? - html

Question

I'm working with some custom bootstrap css for a collapsible navbar (https://github.com/IronSummitMedia/startbootstrap/tree/master/templates/grayscale). I tried adding a search bar up top, and I want the search bar to be in line with the icon, with the links underneath: 174.37.193.115/chrome/
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">
<i class="fa fa-bolt fa-lg"></i>
</a>
<div class="input-group col-lg-6 col-lg-offset-0">
<input type="text" class="form-control" placeholder="Look for people, groups, and anything">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
News
</li>
<li>
Profile
</li>
<li class="dropdown">
Something
<ul class="dropdown-menu">
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>
Bamn
</li>
<li>
Pewpew
</li>
<li>
Vroom
</li>
<li>
Wheeeew
</li>
<li>
Bzzzt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Unfortunately, I can't seem to get the search bar to go into the right place, and something really funky seems to be going on. In general, I'm also confused as to which elements can stack in line with each other (I can't seem to force it via col).
Any help in getting the search bar in line with the bolt, and links underneath would be appreciated! An explanation of how elements stack in line would be an added bonus!

Answer 1

To get the nav links under the above stuff:
.nav>li>a {
padding: 10px 30px 10px 0;
}
To make hoverstates look nicer, perhaps this is better:
.nav>li>a {
padding: 10px 0;
margin-right: 30px;
}
Or, if you just want to compensate for the padding offset, you can move the whole navbar to the left:
.navbar-nav {
margin-left: -15px;
}
To get the search bar inline with the logo:
.col-lg-6 {
margin-top: 12px;
}
Just add these rules to your own css file that you will call after the bootstrap ones. You might also to similar things for other responsive variations (or switch to percents).