bootstrap float image center of nav - image

Question

OK I have accomplished this without bootstrap
<nav id="active">
<ul>
<li>Home</li>
<li>Ministries</li>
<li>Bylaws</li>
<li>About Us
<ul>
<li>History of RK</li>
<li>Mission Statement</li>
<li>Prayer Request</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
<div class="img"></div>
</nav>
I am wanting to convert the current site to bootstrap and I am unable to find exactly how to do this. The image basically is floating in the middle of the navigation, that way it will allow me to make the image slightly larger in height that the navbar. Currently this is how I have it, the image isn't floating in the center it is styled there. which isnt the way I want it.. again like the image to be bigger than the menu height wise.
<div class="span12">
<nav class="navbar nav-center navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav pull-right">
<li>About Us</li>
<li>Testimonies</li>
<li>Contact Us</li>
</ul>
<div class="navbar">
<img src="images/logo.png" width="115" height="135" alt=""/>
</div>
</div>
</nav>
</div>
****Ok quick edit... If you view this site. www.risenkings.com, if you notice that the logo image is floating in the middle of navbar. This is what I am trying to accomplish within bootstrap.

Answer 1

I would start by using just the standard navbar markup. Links will automatically float left, so your Home, Ministries and Bylaws can just be wrapped in a ul with 'nav navbar-nav' classes. For the remaining links, you'll want to wrap them in a separate ul adding the navbar-right class as well.
You can repurpose the navbar-brand class for your logo. Remembering that Bootstrap is a mobile first framework, you'll probably want to first style your logo to be on the left within the navbar for your "collapsed" menu style. I just sized your logo generally and adjusted the padding. You can tweak it how you like.
Once the menu is not collapsed (on viewports that are greater than 768px), you'll need to use a media query to position your navbar, and position and center your logo. Using position absolute on the wrapping navbar-brand with the right and left properties to 0, then setting the img inside to display block with margin auto is one way to do this. The demo shows the basic results.
DEMO
HTML:
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://www.risenkings.com/images/logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="navcollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
About Us
<ul class="dropdown-menu" role="menu">
<li>History</li>
<li>Mission</li>
<li>Requests</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
CSS:
.navbar-brand {
padding-top: 2px;
}
.navbar-brand>img {
width: 3em;
}
#media (min-width: 768px) {
.navbar {
margin-top: 4em;
}
.navbar-brand {
position: absolute;
top: -2em;
left: 0;
right: 0;
}
.navbar-brand>img {
width: 6em;
margin: 0 auto;
display: block;
}
}