#site-header.full_screen-header {
z-index: 9999;
#site-header-inner {
overflow: visible !important;
}
#site-navigation-wrap {
right: 0;
}
#site-logo.has-full-screen-logo {
position: relative;
z-index: 101;
.full-screen-logo-link {
display: none;
}
&.opened .custom-logo-link,
&.opened .retina-logo-link {
display: none;
}
&.opened .full-screen-logo-link {
display: block;
}
}
.menu-bar-wrap {
float: right;
height: 100%;
display: table;
}
.menu-bar-inner {
display: table-cell;
vertical-align: middle;
position: relative;
height: 74px;
}
.menu-bar {
display: inline-block;
position: relative;
margin-left: 10px;
min-width: 38px;
height: 33px;
text-align: center;
z-index: 101;
.ham {
display: inline-block;
width: 23px;
height: 2px;
position: relative;
top: 2px;
background-color: $color-2;
vertical-align: middle;
white-space: nowrap;
@include transition(all ease 0.3s);
&:before,
&:after {
position: absolute;
content: "";
display: inline-block;
width: 23px;
height: 2px;
left: 0;
background-color: $color-2;
outline: 1px solid transparent;
@include transition(all ease 0.3s);
}
&:before {
top: -8px;
}
&:after {
top: 8px;
}
}
&.exit .ham {
background-color: transparent !important;
&:before,
&:after {
background-color: $color-1;
}
&:before {
@include transform(translateY(8px) rotateZ(-45deg));
}
&:after {
@include transform(translateY(-8px) rotateZ(45deg));
}
}
}
&.nav-open {
@include transform(none !important);
}
#full-screen-menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
overflow-y: scroll;
z-index: 100;
#full-screen-menu-inner {
display: table;
width: 100%;
height: 100%;
padding: 0 40px;
}
#site-navigation {
display: table-cell;
vertical-align: middle;
padding: 100px 0;
text-align: center;
}
}
.fs-dropdown-menu {
list-style: none;
margin: 0;
li {
a {
display: block;
color: $color-1;
letter-spacing: 2px;
text-transform: uppercase;
&:hover {
color: $color-4;
}
&:focus {
outline: 1px dashed rgba($color: #fff, $alpha: 0.3);
}
}
> a .nav-arrow {
display: inline-block;
width: 26px;
padding-left: 5px;
text-align: center;
&:before {
content: "+";
}
&:focus {
outline: 1px dashed rgba($color: #fff, $alpha: 0.3);
}
}
&.open-sub > a .nav-arrow:before {
content: "-";
}
.sidebar-box {
display: none;
}
}
ul.sub-menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
li a {
font-size: 16px;
padding: 6px 0;
}
}
> li {
display: block;
> a {
font-size: 24px;
line-height: 1.2;
padding: 12px 0;
}
}
> li.search-toggle-li {
max-width: 220px;
margin: 10px auto 0;
form {
position: relative;
}
input,
.search-text {
font-size: 20px;
padding: 4px 0;
color: $color-1;
margin: 0;
text-align: center;
text-transform: uppercase;
}
input {
position: relative;
border: 0;
background-color: transparent;
border-bottom: 1px solid $color-17;
@include border-radius(0);
z-index: 2;
&:hover,
&:focus {
border-color: $color-1;
}
}
.search-text {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: text;
@include opacity(0.5);
z-index: 1;
i {
display: inline-block;
background-color: $color-1;
width: 3px;
height: 3px;
margin-left: 3px;
@include animation(blink 1s linear infinite);
}
i + i {
@include animation-delay(0.2s);
}
i + i + i {
@include animation-delay(0.4s);
}
}
form.search-filled .search-text {
@include opacity(0);
@include transition-duration(150ms);
}
}
}
.oceanwp-social-menu {
display: block;
float: none;
margin-top: 30px;
text-align: center;
right: auto;
.social-menu-inner {
display: block;
height: auto !important;
}
ul li {
float: none;
display: inline-block;
}
&.simple-social ul li a {
background-color: transparent !important;
color: $color-1;
font-size: 24px;
padding: 0 16px;
margin: 0;
&:hover {
color: $color-4;
}
}
.colored ul li a,
.minimal ul li a,
.dark ul li a {
padding: 0 4px;
}
.colored ul li a span,
.minimal ul li a span,
.dark ul li a span {
font-size: 16px;
width: 60px;
height: 60px;
line-height: 60px;
}
}
}
@-webkit-keyframes blink {
0% {
-webkit-opacity: 1;
}
50% {
-webkit-opacity: 0;
}
100% {
-webkit-opacity: 1;
}
}
@-moz-keyframes blink {
0% {
-moz-opacity: 1;
}
50% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 1;
}
}
@-o-keyframes blink {
0% {
-o-opacity: 1;
}
50% {
-o-opacity: 0;
}
100% {
-o-opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*------------------------------------*
All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {
/* header > logo */
#site-header.full_screen-header #site-logo.has-full-screen-logo.opened {
.custom-logo-link {
display: block;
}
.full-screen-logo-link {
display: none;
}
}
}