Center logo with search bar pulled right bootstrap

Question

So first off this is what i'm trying to achieve

I want to keep the logo centered in the middle of the webpage with the searchbar pulled to the right(with text under it) This is the code I currently have: http://jsfiddle.net/62b4jf1n/

<div class="divide-nav navbar logo-nav navbar-static-top" role="navigation">

    <ul class="nav navbar-nav">
        <li>
            <div class="col-lg-5 col-xs-10 col-centered">
                <a href="/">
                    <img style="max-width:600px; margin-top: -7px;" src="http://i.imgur.com/FL53zwz.png">
                </a>
            </div>
        </li>
    </ul>
    <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
                    </button>
                </div>
            </div>
            <br>
            <p class="white">
                PH: 09 444 4444
                <br> FAX: 09 444 4444
            </p>
        </form>
    </div>
</div>

and then the CSS

.divide-nav{
  height: 120px;
  background-color: #222222;
  border: 0 !important;
}
.logo-nav{
margin-bottom: 0px;
}
.white, .white a {
  color: #fff;
}
.col-centered{
    float: none;
    margin: 0 auto;
}

The issue is that the logo is not quite centered, and is pulling left slightly.

Answer 1

DEMO https://jsbin.com/iJaJAzIM

1. The logo needs an absolute position and the image size matters. If it's 300px then its left is 50% and top is 50% but the top and left margin is negative by half the width and height.

2. navbar will need to be colored by you. Look at the unminified Bootstrap default CSS to know what selector to target and do those changes in the min-width media query.

3. How this collapses needs to be adjusted by you in the CSS before the media query. Anthing done here affects all viewport sizes so you may have to reverse it in a min width.

CSS

.navbar {
    margin: 0
}
.logobar img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    display: block;
    padding: 2% 3%;
}
.logobar {
    color: #fff;
    background: #333;
    position: relative;
    margin-bottom: 20px;
    padding: 15px;
}
.logobar form {
    text-align: center;
    margin-top: 15px;
}
@media (min-width:500px) { 
    .logobar img {
        float: left;
        margin-top: 20px;
    }
    .logobar form {
        text-align: center;
        margin-top: 15px;
        float: right;
        width: 40%;
    }
}
@media (min-width:768px) { 
    .logobar {
        padding: 30px 0
    }
    .logobar img {
        position: absolute;
        height: auto;
        padding: 0;
        max-width: 300px;
        margin-top: -25px;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        float: none;
    }
    .logobar form {
        margin-top: 25px;
        float: right;
        width: 200px;
        text-align: center;
        padding-right: 2%;
    }
    .navbar > .container {
        text-align: center
    }
    .navbar-header {
        float: none;
        display: inline-block;
    }
    .navbar .navbar-nav {
        float: none;
        display: inline-block;
        clear: none;
    }
    .navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .navbar .navbar-nav > li li {
        text-align: left
    }
    .collapse.navbar-collapse#centerednav {
        float: none;
        display: inline-block!important;
        width: auto;
        clear: none;
    }
}

HTML:

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <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 class="collapse navbar-collapse" id="centerednav">
         <ul class="nav navbar-nav">
            <li class="active">
               <a href="#">
                  Home
               </a>
            </li>
            <li>
               <a href="#about">
                  About
               </a>
            </li>
            <li>
               <a href="#contact">
                  Contact
               </a>
            </li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Dropdown <b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                  <li>
                     <a href="#">
                        Action
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        Another action
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        Something else here
                     </a>
                  </li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li>
                     <a href="#">
                        Separated link
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        One more separated link
                     </a>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
      <!--/.nav-collapse -->
      
   </div>
   <!-- /.container -->
   
</div>
<!-- /.navbar -->

<div class="logobar clearfix">
   <img src="http://i.imgur.com/FL53zwz.png">
   <form role="search">
      <div class="input-group">
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
         <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
            </button>
         </div>
      </div>
      <br>
      <p> PH: 09 444 4444 <br>
         FAX: 09 444 4444 </p>
   </form>
</div><!-- /.logobar -->