Cool CSS3 and HTML5 Menu with Logo

Here, In this freebies we covered cool CSS3 and HTML5 menu with customised logo.

Example Demo

Source code for above Demo

CSS Code

<style type="text/css">
#header-wrapper
{
box-shadow: inset 0px 10px 80px 0px rgba(0,0,0,0.2);
height: 102px;
position: relative;
padding: 2.25em 0 2.25em 0;
}
/* Site Header */
#site-header
{
position: relative;
background: url('images/header.png');
background-size: 100% 190px;
height: 190px;
text-shadow: -1px -1px 1px rgba(0,0,0,1);
}
/* Logo */
#logo
{
position: absolute;
left: 40px;
top: 0;
height: 85px;
line-height: 85px;
}
#logo h1
{
font-size: 2.25em;
letter-spacing: -1px;
color: #fff;
                                          margin:0;
}
#logo span
{
display: inline-block;
border-left: solid 2px #d0d0d0;
margin-left: 1em;
padding-left: 1em;
}

/* Site Nav */
#site-nav
{
position: absolute;
top: 0;
right: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: right;
}
#site-nav ul
{
list-style: none;
overflow: hidden;
                                          margin: 0;
}
#site-nav ul li
{
display: block;
float: left;
text-decoration: none;
font-size: 1.2em;
height: 90px;
line-height: 90px;
margin: 0 0 0 1.75em;
}
#site-nav ul li a
{
color: #c0c0c0;
text-decoration: none;
outline: 0;
}
#site-nav ul li a:hover
{
color: #eee;
}
#site-nav ul li.current_page_item
{
background: url('images/nav-arrow.png') center 77px no-repeat;
}
#site-nav ul li.current_page_item a
{
color: #fff;
}
</style>

HTML code

<div id="header-wrapper">
<header class="5grid-layout" id="site-header">
<div class="row">
<div class="12u">
<div id="logo">
<h1 class="mobileUI-site-name">Arcana</h1>
</div>
<nav class="mobileUI-site-nav" id="site-nav">
<ul>
<li class="current_page_item"><a href="index.html">Homepage</a></li>
<li><a href="threecolumn1.html">Three Column #1</a></li>
<li><a href="threecolumn2.html">Three Column #2</a></li>
<li><a href="twocolumn1.html">Two Column #1</a></li>
<li><a href="twocolumn2.html">Two Column #2</a></li>
<li><a href="onecolumn.html">One Column</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>

Used Images in above Menu