<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a id="touch-menu" class="mobile-menu" href="#"><i class="icon-reorder"></i>Menu</a>
<nav>
<ul class="menu">
<li><a href="#"><i class="icon-home"></i>HOME</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
<li><a href="#">Sub-Menu 3</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-user"></i>ABOUT</a></li>
<li><a href="#"><i class="icon-camera"></i>PORTFOLIO</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Level 3 Menu</a>
<ul>
<li><a href="#">Sub-Menu 4</a></li>
<li><a href="#">Sub-Menu 5</a></li>
<li><a href="#">Sub-Menu 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="icon-bullhorn"></i>BLOG</a></li>
<li><a href="#"><i class="icon-envelope-alt"></i>CONTACT</a></li>
</ul>
</nav>
</div><!--end mainWrap-->
/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:22px;}
div { position:relative }
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}
img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 11px;
}
.alignleft, img.alignleft{
display: inline;
float: left;
margin-right: 22px;
}
.alignright, img.alignright {
display: inline;
float: right;
margin-left: 22px;
}
.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
html{-webkit-font-smoothing:antialiased;}
a{color:#BA0707;}
a:hover{color:#BA0707;text-decoration:underline;}
body{background:#ffffff url("images/bkg.jpg") no-repeat 0 0;
color:#3E4156;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
line-height:1;
width:100%;}
h1{font-size:36px;line-height:1.3em; }
h2{font-size:32px;line-height:1.3em;}
h3{font-size:24px;line-height:1.3em;}
h4{font-size:18px;line-height:1.3em;}
h5{font-size:16px;}
h6{font-size:14px;}
p{padding-bottom:11px;}
p,div, span{line-height:1.5em;}
.column-clear{clear:both;}
.clear{overflow: hidden;}
.mainWrap{width:960px;margin:0 auto;}
.title{margin:100px 0 20px 0;
text-align:center;
color:#3E4156;}
.back{text-align:center;}
nav{display:block;
margin-top: 100px;
background:#3E4156;
}
.menu{display:block;}
.menu li{display: inline-block;
position: relative;
z-index:100;}
.menu li:first-child{margin-left:0;}
.menu li a {font-weight:600;
text-decoration:none;
padding:11px;
display:block;
color:#ffffff;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover, .menu li:hover > a{color:#ffffff;
background:#9CA3DA;}
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}
.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}
.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
top: 0px;
}
.mobile-menu{display:none;
width:100%;
padding:11px;
background:#3E4156;
color:#ffffff;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#3E4156;
color:#ffffff;
text-decoration:none;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap{width:768px;}
.menu ul {top:37px;}
.menu li a{font-size:12px;
padding:8px;}
}
@media (max-width: 767px) {
.mainWrap{width:auto;padding:50px 20px;}
.menu{display:none;}
.mobile-menu{display:block;
margin-top:100px;}
nav{margin:0;
background:none;}
.menu li{display:block;
margin:0;}
.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}
.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-left:3px solid #9CA3DA;}
.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}
.menu ul ul {left:0;}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
$(document).ready(function(){
var touch = $('#touch-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
