Main Content
Header Styles
Standard Wireframing Elements
Header Style 1
Close
HTML
<header class="aios-wire-frame-style-1">
<div class="container">
<div class="row">
<div class="logo col-md-4 ">
<a href="#">
<div class="logo-image">
<i class="ai-font-agentimage-mono"></i>
</div>
<div class="logo-text">
<h3>Sample Logo</h3>
<p>tagline goes here</p>
</div>
</a>
</div><!-- end of logo -->
<div class="navigation col-md-8">
<div class="mob-menu ai-font-menu"></div>
<nav>
<div><!-- delete this div when you replace this codes in to wp dynamic menu -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div><!-- end of navigation -->
</div>
</div>
</header><!-- end of header style 1 -->CSS
.aios-wire-frame-style-1{
width: 100%;
height: auto;
border-top: 1px solid #009bbb;
border-bottom: 1px solid #009bbb;
position: relative;
}
/** Logo **/
.aios-wire-frame-style-1 .logo{
padding-top: 25px;
padding-bottom: 25px;
}
.aios-wire-frame-style-1 .logo a{
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 5;
}
.aios-wire-frame-style-1 .logo .logo-image{
background: #009bbb;
display: inline-block;
vertical-align: top;
width: 69px;
}
.aios-wire-frame-style-1 .logo .logo-image i{
font-size: 53px;
color: #fff;
display: inline-block;
padding-left: 4px;
padding-top: 8px;
}
.aios-wire-frame-style-1 .logo .logo-text{
display: inline-block;
vertical-align: top;
padding-left: 3%;
padding-top: 14px;
}
.aios-wire-frame-style-1 .logo .logo-text h3{
font-weight: bold;
font-size: 30px;
line-height: 30px;
text-transform: uppercase;
color: #009bbb;
}
.aios-wire-frame-style-1 .logo .logo-text p{
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
color: #898989;
letter-spacing: 5.2px;
}
/** Logo **/
/** Navigation **/
.aios-wire-frame-style-1 .navigation{
padding-top: 25px;
padding-bottom: 25px;
position: relative;
}
.aios-wire-frame-style-1 .navigation .mob-menu{
display: none;
}
.aios-wire-frame-style-1 .navigation nav{
display: block;
width: 100%;
height: auto;
text-align: right;
}
.aios-wire-frame-style-1 .navigation nav > div > ul{
font-size: 0;
}
.aios-wire-frame-style-1 .navigation nav li{
position: relative;
}
.aios-wire-frame-style-1 .navigation nav > div > ul > li{
display: inline-block;
vertical-align: top;
position: relative;
}
.aios-wire-frame-style-1 .navigation nav > div > ul > li > a{
font-size: 13px;
font-weight: normal;
color: #464646;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 24px 24px;
}
.aios-wire-frame-style-1 .navigation nav > div > ul > li:last-child > a{
padding-right: 0;
}
/** Navigation **/
CSS Mobile
@media only screen and (max-width: 992px) {
/** Logo **/
.aios-wire-frame-style-1 .logo a{
width: 80%;
margin: 0 auto;
}
.aios-wire-frame-style-1 .logo .logo-text{
width: 100%;
text-align: center;
}
.aios-wire-frame-style-1 .logo .logo-image{
display: block;
margin: 0 auto;
}
/** Logo **/
/** Navigaiton **/
.aios-wire-frame-style-1 .navigation{
position: absolute;
left: 0;
top: 0;
}
.aios-wire-frame-style-1 .navigation .mob-menu{
display: block;
float: left;
font-size: 30px;
color: #009bbb;
cursor: pointer;
}
.aios-wire-frame-style-1 .navigation nav{
clear: both;
border-top: 5px solid transparent;
display: none;
}
.aios-wire-frame-style-1 .navigation nav > div > ul{
width: 100%;
height: auto;
}
.aios-wire-frame-style-1 .navigation nav > div > ul > li{
display: block;
}
.aios-wire-frame-style-1 .navigation nav > div > ul > li > a {
display: block;
background: #077f98;
color: #fff;
text-align: left;
border-bottom: 1px solid #fff;
}
.aios-wire-frame-style-1 .navigation nav > div > ul > li:last-child > a{
padding-right: 24px;
}
/** navigation **/
}
Javascript
Header Style 2
Close
HTML
<section class="aios-wire-frame-style-2">
<header>
<div class="navwrap">
<div class="container">
<div class="row">
<div class="logo col-md-4">
<a href="#">
<div class="logo-image">
<i class="ai-font-agentimage-mono"></i>
</div>
<div class="logo-text">
<h3>Sample Logo</h3>
<p>tagline goes here</p>
</div>
</a>
</div><!-- end of logo -->
<div class="navigation col-md-8 col-sm-6">
<div class="mob-menu ai-font-menu"></div>
<nav>
<div><!-- delete this div when you replace this codes in to wp dynamic menu -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Communities</a>
<ul class="sub-menu">
<li><a href="#">Sample Dropdown</a></li>
<li><a href="#">Sample Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Sample Dropdown</a></li>
<li><a href="#">Sample Dropdown</a></li>
<li><a href="#">Sample Dropdown</a></li>
</ul>
</li>
<li><a href="#">Sample Dropdown</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div><!-- end of navigation -->
</div>
</div>
</div><!-- end of nav wrap -->
</header>
<div class="slideshow">
<canvas width="1600" height="426"></canvas>
</div><!-- end of slideshow -->
</section><!-- end of header style 2 -->CSS
/**********************/
.aios-wire-frame-style-2{
width: 100%;
height: auto;
position: relative;
}
.aios-wire-frame-style-2 canvas{
display: block;
width: 100%;
height: auto;
background: url(images/image-holder.png) no-repeat center center #e1e1e1;
}
.aios-wire-frame-style-2 .navwrap{
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/** Logo **/
.aios-wire-frame-style-2 .logo{
padding-top: 25px;
padding-bottom: 25px;
}
.aios-wire-frame-style-2 .logo a{
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 5;
}
.aios-wire-frame-style-2 .logo .logo-image{
background: #009bbb;
display: inline-block;
vertical-align: top;
width: 69px;
}
.aios-wire-frame-style-2 .logo .logo-image i{
font-size: 53px;
color: #fff;
display: inline-block;
padding-left: 4px;
padding-top: 8px;
}
.aios-wire-frame-style-2 .logo .logo-text{
display: inline-block;
vertical-align: top;
padding-left: 3%;
padding-top: 14px;
}
.aios-wire-frame-style-2 .logo .logo-text h3{
font-weight: bold;
font-size: 30px;
line-height: 30px;
text-transform: uppercase;
color: #009bbb;
}
.aios-wire-frame-style-2 .logo .logo-text p{
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
color: #898989;
letter-spacing: 5.2px;
}
/** Logo **/
/** Navigation **/
.aios-wire-frame-style-2 .navigation{
padding-top: 25px;
padding-bottom: 25px;
position: relative;
}
.aios-wire-frame-style-2 .navigation .mob-menu{
display: none;
}
.aios-wire-frame-style-2 .navigation nav{
display: block;
width: 100%;
height: auto;
text-align: right;
}
.aios-wire-frame-style-2 .navigation nav > div > ul{
font-size: 0;
}
.aios-wire-frame-style-2 .navigation nav li{
position: relative;
}
.aios-wire-frame-style-2 .navigation nav > div > ul > li{
display: inline-block;
vertical-align: top;
position: relative;
}
.aios-wire-frame-style-2 .navigation nav > div > ul > li > a{
font-size: 13px;
font-weight: normal;
color: #464646;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 24px 24px;
}
.aios-wire-frame-style-2 .navigation nav > div > ul > li:last-child > a{
padding-right: 0;
}
/** Navigation **/CSS Mobile
@media only screen and (max-width: 992px) {
/** Logo **/
.aios-wire-frame-style-2 .logo a{
width: 80%;
margin: 0 auto;
}
.aios-wire-frame-style-2 .logo .logo-text{
width: 100%;
text-align: center;
}
.aios-wire-frame-style-2 .logo .logo-image{
display: block;
margin: 0 auto;
}
/** Logo **/
.aios-wire-frame-style-2 .navwrap{
position: relative;
}
/** Navigaiton **/
.aios-wire-frame-style-2 .navigation{
position: absolute;
left: 0;
top: 0;
}
.aios-wire-frame-style-2 .navigation .mob-menu{
display: block;
float: left;
font-size: 30px;
color: #009bbb;
cursor: pointer;
}
.aios-wire-frame-style-2 .navigation nav{
clear: both;
border-top: 5px solid transparent;
display: none;
}
.aios-wire-frame-style-2 .navigation nav > div > ul{
width: 100%;
height: auto;
}
.aios-wire-frame-style-2 .navigation nav > div > ul > li{
display: block;
}
.aios-wire-frame-style-2 .navigation nav > div > ul > li > a {
display: block;
background: #077f98;
color: #fff;
text-align: left;
border-bottom: 1px solid #fff;
}
.aios-wire-frame-style-2 .navigation nav > div > ul > li:last-child > a{
padding-right: 24px;
}
/** navigation **/
}Javascript
Header Style 3
Close
HTML
<section class="aios-header-style-3">
<header>
<div class="container">
<div class="row">
<div class="navwrap col-md-3 col-sm-4">
<div class="logo">
<a href="#">
<div class="logo-image">
<i class="ai-font-agentimage-mono"></i>
</div>
<div class="logo-text">
<h3>Sample Logo</h3>
<p>tagline goes here</p>
</div>
</a>
</div><!-- end of logo -->
<div class="navigation">
<nav>
<div><!-- delete this div when you replace this codes in to wp dynamic menu -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div><!-- end of navigation -->
</div><!-- end of nav wrap -->
</div>
</div>
</header>
<div class="slideshow">
<canvas width="1600" height="550"></canvas>
</div>
</section>CSS
.aios-header-style-3{
position: relative;
}
.aios-header-style-3 canvas{
display: block;
width: 100%;
height: auto;
background: url(images/image-holder.png) no-repeat center center #e1e1e1;
min-height: 550px;
}
.aios-header-style-3 .container{
position: relative;
}
.aios-header-style-3 .navwrap{
position: absolute;
left: 0;
top: 0;
background: #fff;
padding: 0;
}
/** Logo **/
.aios-header-style-3 .logo{
padding-top: 25px;
padding-bottom: 25px;
}
.aios-header-style-3 .logo a{
display: block;
color: inherit;
text-decoration: none;
}
.aios-header-style-3 .logo .logo-image{
background: #009bbb;
display: block;
width: 96px;
margin: 0 auto;
}
.aios-header-style-3 .logo .logo-image i{
font-size: 71px;
color: #fff;
display: inline-block;
padding-left: 7px;
padding-top: 8px;
}
.aios-header-style-3 .logo .logo-text{
display: block;
padding-top: 14px;
text-align: center;
}
.aios-header-style-3 .logo .logo-text h3{
font-weight: bold;
font-size: 30px;
line-height: 30px;
text-transform: uppercase;
color: #009bbb;
}
.aios-header-style-3 .logo .logo-text p{
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
color: #898989;
letter-spacing: 5.2px;
}
/** Logo **/
/** Navigation **/
.aios-header-style-3 .navigation{
padding-top: 25px;
padding-bottom: 25px;
position: relative;
}
.aios-header-style-3 .navigation .mob-menu{
display: none;
}
.aios-header-style-3 .navigation nav{
display: block;
width: 100%;
height: auto;
text-align: center;
}
.aios-header-style-3 .navigation nav > div > ul{
font-size: 0;
}
.aios-header-style-3 .navigation nav li{
position: relative;
}
.aios-header-style-3 .navigation nav > div > ul > li{
display: block;
position: relative;
}
.aios-header-style-3 .navigation nav > div > ul > li > a{
font-size: 13px;
font-weight: normal;
color: #464646;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 14px 0;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-header-style-3 .navigation nav > div > ul > li:last-child > a{
padding-right: 0;
}
.aios-header-style-3 .navigation nav > div > ul > li:hover > a{
background: #009bbb;
color: #fff;
}
/** Navigation **/CSS Mobile
@media only screen and (max-width: 992px) {
.aios-header-style-3 .slideshow,
.aios-header-style-3 .slideshow canvas{
min-height: 550px;
}
}Javascript
function headerStyle3___(){
var slideHeight = jQuery('.aios-header-style-3').height() + 1;
jQuery('.aios-header-style-3 .navwrap').css({
"height": slideHeight + "px"
})
}
headerStyle3___()
jQuery(window).resize(function(){headerStyle3___()})
Header Style 4
Close
HTML
<section class="aios-header-style-4">
<header>
<div class="navwrap">
<div class="container">
<div class="row">
<div class="navigation">
<div class="mob-menu ai-font-menu"></div>
<nav>
<div><!-- delete this div when you replace this codes in to wp dynamic menu -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Buyers & Sellers</a></li>
<li><a href="#">Concierge</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div><!-- end of navigation -->
<div class="logo">
<a href="#">
<div class="logo-image">
<i class="ai-font-agentimage-mono"></i>
</div>
<div class="logo-text">
<h3>Sample Logo</h3>
<p>tagline goes here</p>
</div>
</a>
</div><!-- end of logo -->
</div>
</div>
</div><!-- end of nav wrap -->
</header>
<div class="slideshow">
<canvas width="1600" height="430"></canvas>
</div>
</section><!-- end of header style 4 -->CSS
.aios-header-style-4{
position: relative;
}
.aios-header-style-4 canvas{
display: block;
width: 100%;
height: auto;
background: #e1e1e1;
min-height: 350px;
}
.aios-header-style-4 .navigation .mob-menu{
display: none;
}
.aios-header-style-4 .container{
position: relative;
}
.aios-header-style-4 .navwrap{
position: absolute;
left: 0;
top: 0;
padding: 0;
width: 100%;
}
/** Navigation **/
.aios-header-style-4 .navigation{
padding-top: 25px;
padding-bottom: 25px;
position: relative;
z-index: 6;
text-align:center;
}
.aios-header-style-4 .navigation .mob-menu{
display: none;
}
.aios-header-style-4 .navigation nav{
display: block;
width: 100%;
height: auto;
}
.aios-header-style-4 .navigation nav > div > ul{
font-size: 0;
}
.aios-header-style-4 .navigation nav li{
position: relative;
}
.aios-header-style-4 .navigation nav > div > ul > li{
display: inline-block;
vertical-align: top;
position: relative;
}
.aios-header-style-4 .navigation nav > div > ul > li > a{
font-size: 13px;
font-weight: normal;
color: #464646;
text-transform: uppercase;
text-decoration: none;
display: block;
padding:14px 26px;
}
/** Navigation **/
/** Logo **/
.aios-header-style-4 .logo{
padding-top: 4%;
padding-bottom: 25px;
width: 100%;
text-align: center;
}
.aios-header-style-4 .logo a{
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 5;
}
.aios-header-style-4 .logo .logo-image{
background: #009bbb;
display: inline-block;
vertical-align: top;
width: 156px;
margin: 0 auto;
text-align: left;
}
.aios-header-style-4 .logo .logo-image i{
font-size: 119px;
color: #fff;
display: inline-block;
padding-left: 7px;
padding-top: 8px;
}
.aios-header-style-4 .logo .logo-text{
display: inline-block;
vertical-align: top;
padding-left: 2%;
padding-top: 29px;
text-align: center;
}
.aios-header-style-4 .logo .logo-text h3{
font-weight: bold;
font-size: 56px;
line-height: 56px;
text-transform: uppercase;
color: #009bbb;
}
.aios-header-style-4 .logo .logo-text p{
font-weight: normal;
font-size: 22px;
text-transform: uppercase;
color: #898989;
letter-spacing: 10.2px;
padding-left: 11px;
}
/** Logo **/
.aios-header-style-4 .hd-contact-info{
position: absolute;
text-align: right;
width: 100%;
left: 0;
top: 11%;
z-index: 2;
}
.aios-header-style-4 .hd-contact-info > div{
display: inline-block;
vertical-align: middle;
font-size: 14px;
color: #464646;
margin-left: 3%;
}
.aios-header-style-4 .hd-contact-info > div i{
color: #009bbb;
display: inline-block;
vertical-align: middle;
font-size: 14px;
padding-right: 7px;
}CSS Mobile
@media only screen and (max-width: 992px) {
.aios-header-style-4 .navigation .mob-menu{
display: block;
float: left;
font-size: 30px;
color: #009bbb;
cursor: pointer;
}
.aios-header-style-4 .navigation{
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.aios-header-style-4 .navigation nav{
clear: both;
border-top: 5px solid transparent;
display: none;
}
.aios-header-style-4 .navigation nav > div > ul{
width: 100%;
height: auto;
}
.aios-header-style-4 .navigation nav > div > ul > li{
display: block;
}
.aios-header-style-4 .navigation nav > div > ul > li > a {
display: block;
background: #077f98;
color: #fff;
text-align: left;
border-bottom: 1px solid #fff;
}
.aios-header-style-4 .navigation nav > div > ul > li:last-child > a{
padding-right: 24px;
}
.aios-header-style-4 .logo{
padding-top: 25px
}
.aios-header-style-4 .logo a{
width: 80%;
margin: 0 auto;
}
.aios-header-style-4 .logo .logo-image{
width: 93px;
display: block;
}
.aios-header-style-4 .logo .logo-image i {
font-size: 70px;
}
.aios-header-style-4 .logo .logo-text{
text-align: left;
padding-top: 18px;
}
.aios-header-style-4 .logo .logo-text h3{
font-size: 30px;
line-height: 30px;
}
.aios-header-style-4 .logo .logo-text p{
font-size: 12px;
letter-spacing: 5.2px;
padding-left: 0;
}
}Javascript
Header Style 5
Close
HTML
<section class="aios-header-style-5">
<header>
<div class="container">
<div class="row">
<div class="navwrap">
<div class="navigation col-md-3">
<div class="mob-menu-5 ai-font-menu"></div>
<div class="nav-container">
<div class="nav-close ai-font-x-sign"></div>
<nav>
<div><!-- delete this div when you replace this codes in to wp dynamic menu -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<div class="contact-info">
<p>1.123.456.7890</p>
<a href="#">[email protected]</a>
</div>
</div>
</div><!-- end of navigation -->
</div>
</div>
</div>
</header>
<div class="slideshow">
<canvas width="1600" height="430"></canvas>
</div>
</section><!-- end of header style 5 -->CSS
.aios-header-style-5{
position: relative;
}
.aios-header-style-5 canvas{
display: block;
width: 100%;
height: auto;
background: #e1e1e1;
min-height: 530px;
}
/** Navigation **/
.aios-header-style-5 .container{
position: relative;
}
.aios-header-style-5 .navwrap{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.aios-header-style-5 .navigation .mob-menu-5{
width: 42px;
height: 42px;
background: #009bbb;
position: absolute;
left: 0;
top: 0;
margin: 15px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: #fff;
font-size: 19px;
padding: 11px 0;
}
.aios-header-style-5 .navigation .nav-container{
position: relative;
background: #009bbb;
padding: 20px;
left: -100%;
opacity: 0;
}
.aios-header-style-5 .navigation .nav-close{
color: #fff;
font-size: 12px;
position: absolute;
right: 2%;
top: 2%;
cursor: pointer;
padding: 10px;
}
.aios-header-style-5 .navigation nav{
padding-left: 26px;
padding-top: 82px;
}
.aios-header-style-5 .navigation nav > div > ul{
font-size: 0;
}
.aios-header-style-5 .navigation nav li{
position: relative;
}
.aios-header-style-5 .navigation nav > div > ul > li{
display: block;
}
.aios-header-style-5 .navigation nav > div > ul > li > a{
font-size: 13px;
font-weight: normal;
color: #fff;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 14px 10px;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-header-style-5 .navigation nav > div > ul > li:hover > a{
background: #fff;
color: #009bbb;
}
/** Contact info **/
.aios-header-style-5 .navigation .contact-info{
border-top: 1px solid #4fc2da;
margin-left: 26px;
padding-top: 37px;
margin-top: 29px;
width: 71%;
}
.aios-header-style-5 .navigation .contact-info p{
color: #fff;
font-size: 13px;
display: block;
line-height: 24px;
}
.aios-header-style-5 .navigation .contact-info a{
color: #fff;
font-size: 13px;
text-decoration: none;
}CSS Mobile
Javascript
function headerStyle5___(){
var slideHeight = jQuery('.aios-header-style-5').height() + 1;
jQuery('.aios-header-style-5 .navwrap, .aios-header-style-5 .navigation .nav-container').css({
"height": slideHeight + "px"
})
}
headerStyle5___()
jQuery(window).resize(function(){headerStyle5___()})
function headerStyle5Nav__(){
jQuery('.aios-header-style-5 .mob-menu-5').click(function(){
jQuery('.nav-container').animate({
left: 0,
opacity: 1
});
});
jQuery('.aios-header-style-5 .nav-close').click(function(){
jQuery('.nav-container').animate({
left: '-100%',
opacity: 0
});
})
}
headerStyle5Nav__();Header Style 6
Close
HTML
<section class="aios-header-style-6">
<header>
<div class="navwrap">
<div class="container">
<div class="row">
<div class="logo col-md-2">
<a href="#">
<div class="logo-image">
<i class="ai-font-agentimage-mono"></i>
</div>
</a>
</div><!-- end of logo -->
<div class="navigation">
<div class="mob-menu ai-font-menu"></div>
<nav>
<div><!-- delete this div when you replace this codes in to wp dynamic menu -->
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Concierge</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div><!-- end of navigation -->
</div>
</div>
</div><!-- end of nav wrap -->
</header>
<div class="slideshow">
<canvas width="1600" height="480"></canvas>
</div><!-- end of slideshow -->
</section><!-- end of header style 6 -->CSS
.aios-header-style-6{
width: 100%;
height: auto;
position: relative;
}
.aios-header-style-6 canvas{
display: block;
width: 100%;
height: auto;
background: url(images/image-holder.png) no-repeat center center #e1e1e1;
}
.aios-header-style-6 .navwrap{
position: absolute;
left: 0;
top: 30px;
width: 100%;
}
.aios-header-style-6 .navwrap .container{
position: relative;
}
.aios-header-style-6 .navigation .mob-menu{
display: none;
}
/** Navigation **/
.aios-header-style-6 .navigation nav{
}
.aios-header-style-6 .navigation nav > div > ul{
font-size: 0;
}
.aios-header-style-6 .navigation nav li{
position: relative;
}
.aios-header-style-6 .navigation nav > div > ul > li{
display: inline-block;
vertical-align: top;
}
.aios-header-style-6 .navigation nav > div > ul > li > a{
font-size: 13px;
font-weight: normal;
color: #959595;
text-transform: uppercase;
text-decoration: none;
display: block;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
/** nav layer 1 **/
.aios-header-style-6 .navigation nav > div > ul:first-child{
}
.aios-header-style-6 .navigation nav > div > ul:first-child > li{
}
.aios-header-style-6 .navigation nav > div > ul:first-child > li > a{
padding: 14px 28px;
}
.aios-header-style-6 .navigation nav > div > ul> li:first-child > a{
padding-left: 0;
}
/** nav layer 2 **/
.aios-header-style-6 .navigation nav > div > ul:first-child + div + ul{
}
.aios-header-style-6 .navigation nav > div > ul:first-child + ul > li{
}
.aios-header-style-6 .navigation nav > div > ul:first-child + div + ul > li > a{
padding: 14px 25px;
}
.aios-header-style-6 .navigation nav > div > ul:first-child + div + ul > li:last-child > a{
padding-right: 0;
}
/** Navigation **/
/** Logo **/
.aios-header-style-6 .logo{
}
.aios-header-style-6 .logo a{
display: block;
width: 80%;
display: block;
margin: 0 auto;
}
.aios-header-style-6 .logo .logo-image{
background: #009bbb;
display: inline-block;
vertical-align: top;
width: 100%;
margin: 0 auto;
text-align: center;
}
.aios-header-style-6 .logo .logo-image i{
font-size: 103px;
color: #fff;
display: inline-block;
padding-top: 8px;
font-size: 103px;
} CSS Mobile
@media only screen and (max-width: 1199px) {
.aios-header-style-6 .navigation nav > div > ul:first-child + div + ul > li > a {
padding: 14px 17px;
}
.aios-header-style-6 .navigation nav > div > ul:first-child > li > a {
padding: 14px 17px;
}
}
@media only screen and (max-width: 992px) {
/** Navigaiton **/
.aios-header-style-6 .navigation{
position: absolute;
left: 15px;
top: 0;
width: 97%;
}
.aios-header-style-6 .navigation .mob-menu{
display: block;
float: left;
font-size: 30px;
color: #009bbb;
cursor: pointer;
}
.aios-header-style-6 .navigation nav{
clear: both;
border-top: 5px solid transparent;
display: none;
}
.aios-header-style-6 .navigation nav > div > ul{
width: 100%;
height: auto;
}
.aios-header-style-6 .navigation nav > div > ul > li{
display: block;
}
.aios-header-style-6 .navigation nav > div > ul > li > a {
display: block;
background: #077f98;
color: #fff;
text-align: left;
border-bottom: 1px solid #fff;
}
.aios-header-style-6 .navigation nav > div > ul > li:last-child > a{
padding-right: 24px;
}
.aios-header-style-6 .logo .logo-image{
max-width: 132px;
float: right;
}
.aios-header-style-6 .logo .logo-image i {
font-size: 103px;
}
}Javascript
jQuery('.aios-header-style-6 #nav').splitNav({
'logo': jQuery('.aios-header-style-6 .logo'),
'navClasses': 'col-md-5'
});
Header Style 7
Close
HTML
<section class="aios-wire-frame-style-7">
<header>
<div class="navwrap">
<div class="container">
<div class="logo">
<a href="#">
<div class="logo-image">
<i class="ai-font-agentimage-mono"></i>
</div>
<div class="logo-text">
<h3>Sample Logo</h3>
<p>tagline goes here</p>
</div>
</a>
</div><!-- end of logo -->
<div class="navigation">
<div class="mob-menu ai-font-menu"></div>
<nav>
<div><!-- delete this div when you replace this codes in to wp dynamic menu -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Communities</a>
<ul class="sub-menu">
<li><a href="#">Sample Dropdown</a></li>
<li><a href="#">Sample Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Sample Dropdown</a></li>
<li><a href="#">Sample Dropdown</a></li>
<li><a href="#">Sample Dropdown</a></li>
</ul>
</li>
<li><a href="#">Sample Dropdown</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div><!-- end of navigation -->
</div>
</div><!-- end of nav wrap -->
</header>
<div class="slideshow">
<canvas width="1600" height="426"></canvas>
</div><!-- end of slideshow -->
</section><!-- end of header style 2 -->CSS
/**********************/
.aios-wire-frame-style-7{
width: 100%;
height: auto;
position: relative;
}
.aios-wire-frame-style-7 canvas{
display: block;
width: 100%;
height: auto;
background: url(images/image-holder.png) no-repeat center center #e1e1e1;
}
.aios-wire-frame-style-7 .navwrap{
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/** Logo **/
.aios-wire-frame-style-7 .logo{
padding-top: 25px;
text-align: center;
}
.aios-wire-frame-style-7 .logo a{
display: block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 5;
}
.aios-wire-frame-style-7 .logo .logo-image{
background: #009bbb;
display: inline-block;
vertical-align: top;
width: 69px;
}
.aios-wire-frame-style-7 .logo .logo-image i{
font-size: 53px;
color: #fff;
display: inline-block;
padding-left: 4px;
padding-top: 8px;
}
.aios-wire-frame-style-7 .logo .logo-text{
display: inline-block;
vertical-align: top;
padding-left: 3%;
padding-top: 14px;
}
.aios-wire-frame-style-7 .logo .logo-text h3{
font-weight: bold;
font-size: 30px;
line-height: 30px;
text-transform: uppercase;
color: #009bbb;
}
.aios-wire-frame-style-7 .logo .logo-text p{
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
color: #898989;
letter-spacing: 5.2px;
}
/** Logo **/
/** Navigation **/
.aios-wire-frame-style-7 .navigation{
position: relative;
}
.aios-wire-frame-style-7 .navigation .mob-menu{
display: none;
}
.aios-wire-frame-style-7 .navigation nav{
display: block;
width: 100%;
height: auto;
text-align: center;
}
.aios-wire-frame-style-7 .navigation nav > div > ul{
font-size: 0;
}
.aios-wire-frame-style-7 .navigation nav li{
position: relative;
}
.aios-wire-frame-style-7 .navigation nav > div > ul > li{
display: inline-block;
vertical-align: top;
position: relative;
}
.aios-wire-frame-style-7 .navigation nav > div > ul > li > a{
font-size: 13px;
font-weight: normal;
color: #464646;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 24px 24px;
}
.aios-wire-frame-style-7 .navigation nav > div > ul > li:last-child > a{
padding-right: 0;
}
/** Navigation **/CSS Mobile
Javascript