Skip to content

Instantly share code, notes, and snippets.

@alexandr-kazakov

alexandr-kazakov/header demo

Last active December 21, 2016 12:57
Show Gist options
  • Save alexandr-kazakov/17fbebcdee378832be6328be47a27b50 to your computer and use it in GitHub Desktop.
Save alexandr-kazakov/17fbebcdee378832be6328be47a27b50 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
header demo
###### 1 ######
<header id="page_header" class="page_header">
<div class="header_inner clearfix">
<div class="container">
<div class="container_inner clearfix">
<div class="header_inner_left">
<div class="mobile_menu_button"></div>
<div class="logo_wrapper"></div>
</div>
<div class="header_inner_right">
<div class="side_menu_button_wrapper right"></div>
</div>
<div class="main_menu drop_down right">
<ul class="menu-top_menu"></ul>
</div>
</div>
</div>
</div>
</header>
##### 2 #####
<div class="wrapper">
<div id="header_outer" class="header_outer">
<header id="page_header" class="page_header">
<div class="header_inner clearfix">
<div class="container">
<div class="container_inner clearfix">
<div class="header_inner_left">
<div class="mobile_menu_button">
<span><i class="fa fa-bars"></i></span>
</div>
<div class="logo_wrapper"></div>
</div>
<div class="header_inner_right">
<div class="side_menu_button_wrapper right">
<div class="shopping_cart_outer">
<div class="shopping_cart_inner">
<div class="shopping_cart_header">
<a class="header_cart" href="#"><span class="header_cart_span"></span></a>
<div class="shopping_cart_dropdown"></div>
</div>
</div>
</div>
<div class="side_menu_button">
<a class="search_button" href="#"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<div class="main_menu drop_down right">
<ul class="menu-top_menu">
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">work</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
</div>
// CSS
/* ###########
section_header
##############*/
header.page_header {
width: 100%;
display: inline-block;
margin: 0;
vertical-align: middle;
position: relative;
z-index: 110;
-webkit-backface-visibility: hidden;
}
header .container_inner .header_inner_left {
position: absolute;
left: 0;
top: 0;
}
// Mobile Menu Button
.mobile_menu_button {
display: none;
float: left;
height: 100px;
margin: 0 20px 0 0;
}
.mobile_menu_button span {
color: #777;
width: 19px;
height: 17px;
font-size: 14px;
z-index: 50;
display: table-cell;
position: relative;
cursor: pointer;
vertical-align: middle;
}
// Shoping Cart
.shopping_cart_outer {
display: table;
float: left;
position: relative;
width: 43px;
}
.shopping_cart_inner {
display: table-cell;
height: 100px;
vertical-align: middle;
}
.header_bottom .shopping_cart_header {
padding: 0 4px 0 7px;
}
.shopping_cart_header .header_cart {
padding: 0 9px 0 0;
display: inline-block;
border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
-o-border-radius: 2px 2px 0 0;
-ms-border-radius: 2px 2px 0 0;
position: relative;
background-image: url(images/cart.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 34px;
height: 38px;
}
// Search Button
.side_menu_button {
cursor: pointer;
display: table-cell;
vertical-align: middle;
height: 100px;
}
.side_menu_button>a {
font-size: 14px;
position: relative;
display: inline;
width: 20px;
height: 20px;
padding: 0 12px;
}
// Main Menu
nav.main_menu.right {
position: relative;
left: auto;
float: right;
}
nav.main_menu {
position: absolute;
left: 50%;
z-index: 100;
text-align: left;
}
nav.main_menu.right>ul {
left: auto;
}
nav.main_menu>ul {
left: -50%;
position: relative;
}
nav.main_menu ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
nav.main_menu ul li {
display: inline-block;
float: left;
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-position: right;
}
###### 3 ######
<div class="wrapper">
<div id="header_outer" class="header_outer">
<header id="page_header" class="page_header">
<div class="header_inner clearfix">
<div class="container">
<div class="container_inner clearfix">
<div class="header_inner_left">
<div class="mobile_menu_button">
<span><i class="fa fa-bars"></i></span>
</div>
<div class="logo_wrapper"></div>
</div>
<div class="header_inner_right">
<div class="side_menu_button_wrapper right">
<div class="shopping_cart_outer">
<div class="shopping_cart_inner">
<div class="shopping_cart_header">
<a class="header_cart" href="#"><span class="header_cart_span"></span></a>
<div class="shopping_cart_dropdown"></div>
</div>
</div>
</div>
<div class="side_menu_button">
<a class="search_button" href="#"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<div class="main_menu drop_down right">
<ul class="menu-top_menu">
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">work</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
</div>
<div class="content " style="padding-top: 0px;">
<div class="content_inner ">
<div class="q_slider">
<div class="q_slider_inner">
</div>
</div>
<div class="full_width">
<div class="full_width_inner"></div>
</div>
</div>
</div>
//CSS
/* ###########
section_header
##############*/
header.page_header {
background-color: #B7B7B7;
width: 100%;
display: inline-block;
margin: 0;
vertical-align: middle;
position: relative;
z-index: 110;
-webkit-backface-visibility: hidden;
}
header .container_inner .header_inner_left {
position: absolute;
left: 0;
top: 0;
}
// Mobile Menu Button
.mobile_menu_button {
display: none;
float: left;
height: 100px;
margin: 0 20px 0 0;
}
.mobile_menu_button span {
color: #777;
width: 19px;
height: 17px;
font-size: 14px;
z-index: 50;
display: table-cell;
position: relative;
cursor: pointer;
vertical-align: middle;
}
// Shoping Cart
.shopping_cart_outer {
display: table;
float: left;
position: relative;
width: 43px;
}
.shopping_cart_inner {
display: table-cell;
height: 100px;
vertical-align: middle;
}
.header_bottom .shopping_cart_header {
padding: 0 4px 0 7px;
}
.shopping_cart_header .header_cart {
padding: 0 9px 0 0;
display: inline-block;
border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
-o-border-radius: 2px 2px 0 0;
-ms-border-radius: 2px 2px 0 0;
position: relative;
background-image: url(../images/cart.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 34px;
height: 38px;
}
// Search Button
.side_menu_button {
cursor: pointer;
display: table-cell;
vertical-align: middle;
height: 100px;
}
.side_menu_button>a {
font-size: 14px;
position: relative;
display: inline;
width: 20px;
height: 20px;
padding: 0 12px;
}
// Main Menu
nav.main_menu.right {
position: relative;
left: auto;
float: right;
}
nav.main_menu {
position: absolute;
left: 50%;
z-index: 100;
text-align: left;
}
nav.main_menu.right>ul {
left: auto;
}
nav.main_menu>ul {
left: -50%;
position: relative;
}
nav.main_menu ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
nav.main_menu ul li {
display: inline-block;
float: left;
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-position: right;
}
/* ###########
Content
##############*/
.content {
margin-top: -100px;
position: relative;
z-index: 100;
background-color: #f6f6f6;
}
.full_width {
position: relative;
z-index: 100;
background-color: #f6f6f6;
}
.full_width_inner {
position: static;
}
// Slider
.q_slider {
width: 100%;
overflow: hidden;
position: relative;
z-index: 10;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment