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;
}