Center align Logo and align UL horizontally around it

Question

I am trying to capture a layout that I have seen a few different places. The layout has a fixed header with an image centered, and then a horizontal UL that is split around the logo. Attached is the image that I feel represents this.

I need a suggestion to achieve splitting the UL around logo. Right now the UL is always under and not split.

http://jsfiddle.net/jgac8/1/

Here is some markup that I have been attempting: HTML

<header>
<h1 id="logo"><a href="index"></a></h1>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="about">about</a></li>
<li><a href="services">services</a></li>
<li><a href="location">location</a></li>
<li><a href="contact">contact</a></li>
</ul>
</nav>
</header>

CSS

header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}

#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(../img/PP_Logo_Vert_White.png) center no-repeat;
}

nav {
padding: 0px;
margin: 0px;
font-size:16px;
font-weight: 100;
clear:left;
}

nav ul {
padding: 0px;
margin: 0px;
list-style: none;
}

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

Answer 1

You might have to do a bit of tweaking but I believe it is what you want.

HTML

<header>
<h1 id="logo"><a href="index"></a></h1>
<nav id="left">
<a href="#" ></a>
<ul>
<li><a href="about">about</a></li>
<li><a href="services">services</a></li>
</ul>
</nav>

    <nav id="right">
<a href="#" ></a>
<ul>
<li><a href="about">about</a></li>
<li><a href="services">services</a></li>
</ul>
</nav>
</header>

CSS

header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}

#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(http://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png) center no-repeat;
}

#left{position:absolute; left:10%; top:5px; list-style:none}

#right{position:absolute; right:10%; top:5px; list-style:none}

li{list-style:none}

Answer 2

There are many ways to go about this. Depending on how dynamic your site will be. If you are creating it with static html and css I would simply create a container, put three divs inside the container splitting it up how you want. In the first and third div create two separate menus. In the center put the logo. Something like the code below. At a certain width you can create some css media queries to bring it down and make it one navigation.

The very basic idea:

Example of html:

<div class="container">
    <div class="left-nav">
    </div>
    <div class="logo">
    </div>
    <div class="right-nav">
    </div>
</div>  

Example CSS:

.container {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

.left-nav {
    float: left;
    width: 400px;
}

.right-nav {
    float: left;
    width: 400px;
}

.logo {
    float: left;
    width: 200px;
}