SPC Menu

by Chris LaFrombois

HTML

<div class="wrapper">
    <div class="middle">
        <div class="logo">
            <div class="logo-wrap">
                <img src="http://placehold.it/265x95" />
            </div>
        </div>
        <div class="menu">
            <ul class="nav">
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>

CSS

body {
    background:gray;
    margin:0;
    padding:0;
    overflow-x:hidden;
}
* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.clear {
    clear:both;
}

.wrapper {
    position:absolute;
    width:100%;
    top:25px;
}

.middle {
    width:100%;
    max-width:1170px;
    padding:0 15px;
    margin:0 auto;
    position:relative;
}

.logo {
    float:left;
    padding:0;
    width:33.333%;
    position:relative;
}

.logo-wrap {
    position:relative;
    display:inline-block;
    z-index:-1;
}

.logo-wrap::before {
    content:'';
    display:block;
    height:75px;
    background:green;
    position:absolute;
    width:999em;
    right:100%;
    margin-right:15px;
}

.logo-wrap::after {
    content:'';
    display:block;
    height:75px;
    background:green;
    position:absolute;
    width:999em;
    left:100%;
    margin-left:15px;
    top:0;
}

.menu {
    float:left;
    width:66.666%;
    text-align:right;
}
img {
    display:block;
    width:100%;
    max-width:265px;
}
ul.nav {
    margin:0;
    padding:0;
    list-style:none;
    display:inline;
}
.nav li {
    display:inline-block;
    padding:15px;
    font-family:Helvetica, sans-serif;
    font-size:20px;
    text-transform:uppercase;
}