File: //home/madepabj/gamepointpk.com/wp-content/themes/groovy/assets/scss/objects/_header.scss
/* @group Header */
.notice.text{
background: #d0f1ff;
color: $black;
text-align: center;
padding-top: 10px;
font-size: 15px;
line-height: 1.75;
position: relative;
z-index: 3;
border-bottom: 1px solid $border-color;
p{ padding-top: 0; margin-bottom: 10px; display: inline-block; }
i.fa, .remixicon{
margin-right: 5px;
vertical-align: middle;
margin-top: -3px;
}
svg{
width: 20px;
height: 20px;
margin-top: -5px;
vertical-align: middle;
margin-right: 5px;
}
.close{
margin-left: 3px;
font-size: 16px;
&:hover{ opacity: 0.75; }
&:before{
display: none;
}
}
}
#header{
position: relative;
div.menu-mobile{ display: none; }
.grid-container{
padding: 70px 0px 0px;
position: relative;
}
.logo {
text-align: center;
margin: 5px auto;
float: left;
a {
display: inline-block;
color: $black;
vertical-align: middle;
margin: 5px 0;
i.fa{
vertical-align: middle;
position: relative;
top: -5px;
margin-right: 3px;
font-size: 92%;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
&:hover{
transform: translateY(-2px);
}
}
&.text-logo{
.title{ font-size: 40px; }
span{
display: inline-block;
}
}
}
.sticky-logo{
display: none;
}
&.minimalist{
.grid-container{
padding: 60px 0 0;
}
.bg-box{
padding: 20px 60px;
border-radius: 100px;
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
background: $white;
}
.main-nav{
margin-left: auto;
}
ul.menu{
padding: 0;
}
.epcl-social-buttons{
margin-left: 15px;
}
.logo{
margin: 0;
}
.search-menu-item{
svg{
fill: $black;
@include transition;
&:hover{
fill: $main-color;
}
}
}
}
// Header Types
&.classic, &.advertising{
.logo{
float: none;
}
.bg-box{
background: none;
border: 0;
text-align: center;
}
nav{
float: none;
display: inline-block;
padding: 10px 30px;
background: $white;
margin: 50px 0 0;
border: 1px solid $border-color;
border-radius: $large-border-radius;
}
}
&.classic{
div.menu-wrapper .grid-container{
padding: 70px 0 0;
}
.epcl-social-buttons{
margin: 0;
padding: 5px 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
height: 36px;
line-height: 36px;
position: absolute;
top: 12px;
left: 0;
z-index: 101;
}
}
&.advertising{
.logo{ float: left; padding: 15px 0 30px; }
.epcl-banner{
float: right;
width: 728px;
height: 90px;
padding: 10px 0;
}
.epcl-social-buttons{
position: relative;
z-index: 101;
margin-left: 15px;
}
}
// Absolute search button
.epcl-search-button{
position: absolute;
right: 0;
top: 13px;
display: none;
svg{ margin-top: -2px; width: 19px; height: 19px; }
}
&.classic .epcl-search-button{ display: block; }
// Subscribe button
.subscribe-menu-item{ padding-right: 0; }
.epcl-social-buttons{
float: right;
margin: 5px 0 0 30px;
}
// Share buttons
.share-buttons{
float: right;
background-color: $main-color;
padding: 0px 25px;
border-radius: 25px;
font-size: 20px;
height: 44px;
line-height: 44px;
margin: 33px 0 0 10px;
position: relative;
z-index: 101;
a{
display: inline-block;
color: $white;
margin: 0 7px;
position: relative;
z-index: 2;
svg{
width: 16px;
height: 16px;
fill: $white;
}
&:hover{ transform: translateY(-2px); }
}
}
&.minimalist .share-buttons{ margin-top: 4px; }
&.classic .share-buttons{ margin-top: 28px; }
/* Sticky Header */
&.is-sticky{
div.menu-wrapper{
position: fixed;
top: 0;
padding: 3px 0;
z-index: 1000;
width: 100%;
background: $white;
animation: headerPinnedSlideDown 400ms;
border-bottom: 1px solid $border-color;
.bg-box{
padding: 5px 0;
background: none;
border: 0;
display: flex;
}
.grid-container{ padding: 0; }
.logo{
float: left;
margin: 5px 0;
padding-top: 0;
padding-bottom: 0;
max-width: 150px;
a{
font-size: 40px;
}
}
.ads, .clear.ad{ display: none; }
ul.menu{
box-shadow: none;
float: none;
}
nav{
text-align: right;
float: right;
margin-top: auto;
margin-bottom: auto;
flex-grow: 1;
border: 0;
border-radius: 0;
padding: 0;
ul.menu > li{
padding-top: 10px; padding-bottom: 10px;
}
}
.share-buttons, .epcl-social-buttons{ display: none; }
div.epcl-border{ display: none; }
.epcl-search-button{ display: none; }
}
.epcl-banner{ display: none; }
}
&.has-sticky-logo.is-sticky{
.logo:not(.text-logo){ display: none; }
.sticky-logo{ display: block !important; }
}
}
// Main Navigation
.main-nav{
text-align: right;
float: right;
ul.menu{
font-size: 0px;
float: left;
> li.menu-item-has-children{ margin-right: 10px; padding-right: 15px; }
}
ul.menu li{
display: inline-block;
padding: 10px 13px;
position: relative;
&.subscribe-menu-item{
padding-top: 0;
padding-bottom: 0;
}
&.menu-item-has-children:after{
font-family: 'FontAwesome';
content: '\f107';
display: block;
color: $black;
position: absolute;
font-size: 14px;
right: 0;
top: 50%;
z-index: 5;
transform: translateY(-50%);
margin-top: 0px;
@include transition;
}
}
ul.menu li a{
display: inline-block;
font-size: 15px;
line-height: 1.25;
position: relative;
z-index: 1;
color: $black;
background-position: left 100%;
letter-spacing: 0.3px;
font-family: $title-font-family;
&.lightbox{
background: none;
font-size: 20px;
fill: $black;
}
&.epcl-button{
color: $white;
&:hover{
color: $white;
}
}
}
ul.menu li.current-menu-item > a, ul.menu > li.current-menu-ancestor > a{
position: relative;
&:after{
display: block;
content: '';
position: absolute;
left: -7px;
top: -5px;
width: 5px;
height: 5px;
background: $main-color;
border-radius: 5px;
opacity: 0;
animation: fadeInMenu 500ms ease 600ms forwards;
}
}
@keyframes fadeInMenu {
0% { opacity: 0; transform: scale(0.2); }
100% { opacity: 1; transform: scale(1); }
}
ul.menu li a:hover{
color: $main-color;
}
ul.sub-menu{
position: absolute;
left: 0;
top: 100%;
z-index: 100;
padding: 15px 0;
background: $white;
min-width: 250px;
text-align: left;
left: -20px;
opacity: 0;
visibility: hidden;
border: 1px solid $border-color;
border-radius: 10px;
@include transition(200ms);
li{
display: block;
padding: 0;
&.current-menu-item a{
font-weight: 600;
&:after{ display: none; }
}
&.menu-item-has-children:after{
display: none;
right: 10px;
content: '\f105';
}
}
li a{
display: block;
font-size: 14px;
font-weight: 400;
color: $black;
padding: 10px 25px;
background: none;
&:hover{
color: $main-color;
}
}
ul.sub-menu{
left: 100%;
top: -15px;
transform: scale(1) translateX(-10px);
}
}
ul.menu li:hover > ul.sub-menu{
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0px);
}
ul.menu > li.menu-item-has-children.last-menu-item{
ul.sub-menu{
left: auto;
right: 0;
ul.sub-menu{
left: auto;
right: 100%;
}
}
}
}
@keyframes headerPinnedSlideDown{
0% {top:-100%;}
100%{top:0;}
}
/* @end */