logo-h1 en medio del menu de navegación

[00israel]

Hola a todos. No consigo colocar en el medio el logo en este menú de navegación:

http://codepen.io/elcollage_com/pen/YyBjyG

Código HTML:

<section>
 <header>
  <nav>
   <ul>
      <li>CLASES de ACORDEÓN</li>
      <li>PROFESORADO</li>
      <li>ACORDEONES</li>
      <li>CONTACTO</li>
   </ul>
  </nav>
  <div class="logoh1"></div>
 </header>
</section> 

Código:

.logoh1 {
  text-indent:-99999px;
  width: 338px;
  height: 340px;
  background:   url('http://www.elcollage.com/isra/etxepare/prueba-logo.jpg');
  display: block;
  position: absolute;
  top: 18%;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  opacity: .1;
}


body {
background: #fff;
font-family: arial;
}


header {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}

nav li:nth-child(2) {
padding-right: 100px;
}

nav li:nth-child(3) {
padding-left: 120px;
}

Alguien puede echarme una mano?