Final Product
My first solution can be found at the bottom of this post.
We are actually making this harder than necessary... Let's make a tasty hamburger!
Wrap the nav and logo in <header>:
<header class="hamburger">
<h1>Logo</h1>
<nav></nav>
</header>
They will now be the filling between the hamburger buns which look like this:
header:before, header:after {
content:'';
display: block;
height: 50%;
background: #000;
width: 100%;
}
This gives us the equivalent of:
<header class="hamburger">
<div>:before bun</div>
<h1>Logo</h1>
<nav></nav>
<div>:after bun</div>
</header>
The header:before and header:after are each given the same percentage height
The <header> container controls the height of the pseudo element (:before,:after) children
The <nav> is contained in-between and is perfectly centred vertically.
HTML / CSS / Demo Snippet
html,body {
height: 100%;
}
body {
margin: 0;
}
header {
position: relative;
background: #000;
height: 4.3%;
min-width: 800px;
}
/*
Create a spacer above and below the nav
to center the menu between them
*/
header:before, header:after {
content:'';
display: block;
height: 50%;
background: #000;
width: 100%;
}
h1 {
background-image: url(http://imandragrafie.nl/demo/images/menu/polygon1.png);
height: 80px;
margin:0;
padding:0;
text-indent: -9999px;
width: 100px;
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
}
nav#mainMenu {
width:100%;
text-align: center;
margin:0;
padding:0;
background-color:#000000;
}
nav#mainMenu a {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:1.2em;
color: #FFF;
text-decoration: none;
vertical-align: middle;
}
/* create a spacer to get those dots */
nav#mainMenu a:after {
content:'\00B7';
color:#2bbfc4;
display: inline-block;
width: 0;
padding: 0 2%;
}
/*remove the dot and give a width to create a space for the image */
nav#mainMenu a.mid-left:after {
width: 120px;
content:'';
}
/* No spacer for the last child */
nav#mainMenu a:last-child:after {
display: none;
}
<header>
<h1 title="IMANDRAGRAFIE">IMANDRAGRAFIE</h1>
<nav id="mainMenu"><a href="index.html">HOME</a><a href="story.html">MY STORY</a><a href="gallery.php" class="mid-left">GALLERY</a><a href="rates.html" class="mid-right">RATES</a><a href="terms.html">TERMS</a><a href="contact.html">CONTACT</a></nav>
</header>
Archived Solution
This is very possible with just CSS.
To vertically align the menu, there is a nifty display: inline-block trick using a pseudo element that will pull the text down. In my example it looks like this:
nav:before {
display: inline-block;
content: '';
vertical-align: middle;
height: 100%;
}
This works because it places an invisible element that positions itself to the left of the <a> links which are then forced to line up in the middle. It will work across all modern browsers and IE8+.
(If you really really need this to work in IE 6 and 7, it can be placed with a real <div>. Personally I would allow IE 6 and 7 to just degrade gracefully and not vertically centre.)
This is a good way to visualise it. The vertical block is nav:before, the horizontal highlight is the ideal position for the current font size.
I have simplified your example by removing the unneeded list item elements
You can "run code snippet" at the bottom. You can also have a play with this jsBin example.
I have stripped your example to the bare bones, but you can easily make changes
As discussed, please note that the vertical centre of the text will be affected by its line-height and the ideal line-height will change dependant upon the typeface. You can also help line your text vertically by slightly increasing the height of nav:before.
Read more about the line-height issue here.
CSS / HTML
html,body {
height:100%;
margin:0;
}
/*
- height as a percentage to keep it flexible
- max-height so it doesn't get too big
- min-height so it doesn't get too small
*/
nav {
background:#000;
height:4.3%;
min-height: 2em;
max-height:8em;
text-align:center;
position:relative;
}
/*
- line-height will help get text perfectly vertical (or mess it up for you)
-- line-height will change with each typeface, watch out
more information
-> https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element
*/
nav a {
font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#FFF;
text-decoration:none;
vertical-align:middle;
line-height:2;
}
/*
- pseudo element to pull the text down to center vertically
- height can be modified if needed to help offset line-height differences between typefaces
*/
nav:before {
display:inline-block;
content:'';
vertical-align:middle;
height:100%;
}
/*
- create a spacer to get those dots
- percentage right and left padding
*/
nav a:after {
content:'\00B7';
display:inline-block;
width:0;
padding:0 2%;
}
/*
- No spacer for the last child
- apply "display: none" to any a:after that shouldn't have a spacer
*/
nav a:last-child:after {
display:none;
}
<nav id="nav-utility">
<a href="#">HOME</a>
<a href="#">MY STORY</a>
<a href="#">GALLERY</a>
<a href="#">RATES</a>
<a href="#">TERMS</a>
<a href="#">CONTACT</a>
</nav>
