/home/awneajlw/www/wp-content/themes/codz/assets/scss/_header-five.scss
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Header Style Five
--------------------------------------------------------------*/
body[data-header-style="header-style-five"]{
.wraper_header.style-five{
z-index:999;
width:100%;
direction:initial;
&.static-header{
position:relative;
}
&.floating-header{
position:absolute;
}
}
/* wraper_header_main */
.wraper_header_main{
width:100%;
&.radiantthemes-sticky-style-two{
&.delayed-sticky-mode{
transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
&.delayed-sticky-mode-acivate{
position:fixed;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
}
&.i-am-delayed-sticky{
transform:translateY(0);
-webkit-transform:translateY(0);
box-shadow:0px 0px 20px rgba(0,0,0,0.075);
}
}
> .container{
padding-top:20px;
padding-bottom:20px;
}
.header_main{
position:relative;
.brand-logo{
float:left;
text-align:center;
font-size:0;
img{
width:160px;
}
}
}
.header-flyout-menu{
width:36px;
float:right;
margin-top:3px;
text-align:center;
cursor:pointer;
> .header-flyout-menu-icon{
width:5px;
height:5px;
float:left;
margin-left:4px;
margin-bottom:4px;
background-color:#000;
border-radius:50%;
&:nth-child(5),
&:nth-child(8){
transition:all 0.3s ease-in-out 0s;
-webkit-transition:all 0.3s ease-in-out 0s;
}
&:nth-child(13),
&:nth-child(16){
transition:all 0.3s ease-in-out 0.3s;
-webkit-transition:all 0.3s ease-in-out 0.3s;
}
}
&:hover > .header-flyout-menu-icon:nth-child(5),
&:hover > .header-flyout-menu-icon:nth-child(13){
opacity:0;
visibility:hidden;
transform:translateX(-15px);
-webkit-transform:translateX(-15px);
}
&:hover > .header-flyout-menu-icon:nth-child(8),
&:hover > .header-flyout-menu-icon:nth-child(16){
opacity:0;
visibility:hidden;
transform:translateX(15px);
-webkit-transform:translateX(15px);
}
}
.header_main_action{
float:right;
margin-top:13px;
margin-right:30px;
text-align:center;
font-size:0;
ul{
> li{
position:relative;
display:inline-block;
vertical-align:top;
margin-right:27px;
&:last-child,
&:only-child{
margin-right:0;
}
i{
font-size:18px;
color:#000;
line-height:1;
cursor:pointer;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
&.header-cart-bar > .header-cart-bar-icon{
position:relative;
display:block;
margin-right:6px;
.cart-count{
position:absolute;
top:-8px;
right:-13px;
width:18px;
height:18px;
border-radius:50%;
font-size:10px;
color:#fff;
line-height:20px;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
}
}
}
}
}
.is-sticky .wraper_header_main{
box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
/* flyout-menu-overlay */
.flyout-menu-overlay{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
opacity:0;
visibility:hidden;
> .flyout-menu-overlay-line{
position:absolute;
left:0;
right:0;
height:0;
opacity:0;
visibility:hidden;
transition:all 0.6s ease-in-out 0s;
-webkit-transition:all 0.6s ease-in-out 0s;
&:nth-child(1){
top:0;
}
&:nth-child(2){
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
&:nth-child(3){
bottom:0;
}
}
}
/* wraper_flyout_menu */
.wraper_flyout_menu{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
opacity:0;
visibility:hidden;
overflow:auto;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
> .table{
display:table;
table-layout:fixed;
width:100%;
height:100%;
margin:0;
> .table-cell{
position:relative;
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
padding:50px 3px 30px 30px;
text-align:center;
> .flyout-menu{
> .flyout-menu-close{
position:absolute;
top:30px;
right:30px;
width:30px;
height:30px;
z-index:2;
text-align:center;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
cursor:pointer;
> .flyout-menu-close-line{
width:100%;
height:2px;
float:left;
background-color:#fff;
&:nth-child(2){
margin-top:13px;
}
&:nth-child(2){
margin-top:-1px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
}
}
/* NAV */
> .flyout-menu-nav{
margin-bottom:55px;
visibility:unset !important;
> [class*='menu-'] > ul.menu{
> li,
> li > ul > li,
> li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li > ul li{
position:relative;
width:100%;
margin-bottom:20px;
}
> li{
opacity:0;
visibility:hidden;
transform:translateY(10px);
-webkit-transform:translateY(10px);
}
> li:nth-child(1){
transition:all 0.4s ease-in-out 0.3s;
}
> li:nth-child(2){
transition:all 0.4s ease-in-out 0.5s;
}
> li:nth-child(3){
transition:all 0.4s ease-in-out 0.7s;
}
> li:nth-child(4){
transition:all 0.4s ease-in-out 0.9s;
}
> li:nth-child(5){
transition:all 0.4s ease-in-out 1.0s;
}
> li > a,
> li > ul > li > a,
> li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > ul li a{
position:relative;
display:inline-block;
vertical-align:top;
color:inherit;
}
> li > a{
}
> li.current-menu-item > a,
> li.current-menu-parent > a,
> li > ul > li.current-menu-item > a,
> li > ul > li.current-menu-parent > a,
> li > ul > li > ul > li.current-menu-item > a,
> li > ul > li > ul > li.current-menu-parent > a{
}
> li > ul,
> li > ul > li > ul,
> li > ul > li > ul > li > ul,
> li > ul > li > ul > li > ul > li > ul{
display:none;
margin-top:15px;
}
> li > ul > li,
> li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li > ul li{
margin-bottom:15px;
}
> li > ul > li > a,
> li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > ul li a{
display:block;
font-weight:500;
font-size:15px;
line-height:23px;
opacity:0.85;
}
> li > ul > li > ul > li > a{
padding-left:35px;
}
> li > ul > li > ul > li > ul > li > a{
padding-left:45px;
}
> li > ul > li > ul > li > ul > li > ul li a{
padding-left:55px;
}
}
}
> .flyout-header-social{
.title{
margin-bottom:15px;
text-transform:uppercase;
font-weight:700;
font-size:14px;
color:#fff;
line-height:26px;
letter-spacing:1px;
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:all 0.4s ease-in-out 1.2s;
}
ul.social{
font-size:0;
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:all 0.4s ease-in-out 1.4s;
> li{
display:inline-block;
vertical-align:top;
margin-left:11px;
margin-right:11px;
> a{
display:inline-block;
vertical-align:top;
font-size:16px;
color:#fff;
line-height:1;
}
}
}
}
}
}
}
}
}
body[data-header-style="header-style-five"].admin-bar .wraper_header.style-one .wraper_header_main{
top:0;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
body[data-header-style="header-style-five"].admin-bar .is-sticky .wraper_header.style-one .wraper_header_main{
top:32px !important;
}
body[data-header-style="header-style-five"].flyout-menu-active .flyout-menu-overlay{
opacity:1;
visibility:visible;
}
body[data-header-style="header-style-five"].flyout-menu-active .flyout-menu-overlay > .flyout-menu-overlay-line{
height:200px;
opacity:1;
visibility:visible;
}
body[data-header-style="header-style-five"].flyout-menu-active .wraper_flyout_menu{
opacity:1;
visibility:visible;
}
body[data-header-style="header-style-five"].flyout-menu-active .wraper_flyout_menu > .table > .table-cell > .flyout-menu > .flyout-menu-nav > [class*='menu-'] > ul.menu > li{
opacity:0.55;
visibility:visible;
transform:translateY(0);
-webkit-transform:translateY(0);
}
body[data-header-style="header-style-five"].flyout-menu-active .wraper_flyout_menu > .table > .table-cell > .flyout-menu > .flyout-header-social .title,
body[data-header-style="header-style-five"].flyout-menu-active .wraper_flyout_menu > .table > .table-cell > .flyout-menu > .flyout-header-social ul.social{
opacity:1;
visibility:visible;
transform:translateY(0);
-webkit-transform:translateY(0);
}