bootstrap nav bar logo alignment

Question

I have a few different Navs on the top and one has the main logo on it. I am trying to figure out how to align the text and the logo with each other as well appear off the nav bar.

edited

html:

    <header>
        
      <div class="row">
          <div class="container"> 
              <ul id="accnt_nav" class="nav nav-pills pull-right">
                 <li><a href="">Sign in</a></li>
                 <li><a href="">Register</a></li>
                 <li><a href="">My Account</a></li>
                 <li><a href="">Wholesale</a></li>
                 <li>Contact Us:<a href="#contact">info@healinghomefoods.com</a></li> 
              </ul>
          </div>                     
      </div>

    <div class="container">  
      <div class="row">      
           <ul class="nav nav-pills pull-right">
               <li><a href="">Search</a></li>
               <li><a href="">Cart</a></li>
           </ul>
      </div>
  </div>
     
     <div class="row">
         <div class="container">
              <ul id="header-nav" class="nav nav-pills">
                  <li class="">
                      <a href="#" class="logo-link"> <img class="logo" src="http://placehold.it/150/3498db/fff"></a>
                  </li>
                  <li><a href="">shop online</a></li>
                  <li><a href="">ingredients</a></li>
                  <li><a href="">locations</a></li>
                  <li><a href="">faq &amp; info</a></li>
                  <li><a href="">about us</a></li>
              </ul>
        </div>
     </div>
      
  </header>

css:

html {
  font-family: georgia;
}

a {
  background: transparent;
}

a:active, a:hover {
  outline: 0;
}

header{
  background-color: #efe3d0;
  -moz-box-shadow: 0px 5px 1px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 5px rgba(0,0,0,0.2);
  box-shadow: 0px 5px 1px rgba(0,0,0,0.2);

}

#header-nav {
  color: #694220;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top:80px;
  margin-bottom: -55px;
}

#header-nav a {
  color: #694220;
}


.logo { border-radius: 100%; }
.logo-link { margin-top:-65px; }

/*Overrides */

ul.nav a:hover { 
   background-color: rgba(255, 255, 255, .1);
}

.nav-pills > li +li::before {
    content: " | ";
}

#accnt_nav > li:last-child {
  margin-left: 26px;
  width:300px;
}

.nav-pills > li > a {
  display: inline-table;
}

This is my Desired goal.

Bootply Link: revised

Answer 1

I wrote this margin-top:80px; in #header-nav

and

this margin-top:-80px; in .logo-link to make it work.

Here you can see the result http://www.bootply.com/TcNx2mtwix . Actually Search & Cart were not properly separated from #header-nav, so I used margin-top:80 to achieve it.

Answer 2

One quick solution would be to add a bottom property to .logo:

.logo {
    border-radius: 100%;
    bottom: 65px;
    position: relative;
}

.logo-link {
    margin-bottom: -75px;
}