.site-header { .site-branding { text-align: left; } .site-title { font-size: 2.5em; font-weight: 700; line-height: 1; margin: 0; padding: 0; a { text-decoration: none; color: $black-color; display: block; line-height: 1; &.custom-logo-link { padding: 0; } } } .site-description { margin: 0; padding: 0; font-size: 1em; font-style: italic; } } body.nav-open { .main-navigation { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ .site-header { height: 83px; margin-top: -1px; margin-bottom: 40px; .main-header { width: 100%; position: fixed; background: $white-color; border-bottom: 2px dashed #ccc; top: 0; z-index: 99; height: 83px; } } .single { .site-header { margin-bottom: 0; } } .site-header { &.has-fixed { position: fixed; height: 70px; } .header-inner { position: relative; padding: 0 ms(1); .header-left { float: left; line-height: 83px; } .site-branding { display: block; max-width: 700px; text-align: center; margin: 0 auto; &:hover { opacity: 0.8; } .site-description { color: $black-color; } } } } .header-left { .menu-toggle, .menu-toggle-close { width: 50px; position: absolute; top: 0; @include em('font-size', 30); cursor: pointer; z-index: 999; } .menu-toggle { color: $black-color; } .menu-toggle-close { color: $white-color; } } .logo { margin: 0; line-height: 83px; img { vertical-align: middle; } } .main-navigation { -webkit-transition: all 0.35s ease; -ms-transition: all 0.35s ease; transition: all 0.35s ease; background: $black-color; position: fixed; height: 100%; width: 100%; max-width: 280px; left: 0; top: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); z-index: 99999; .header-left { float: none; width: 50px; height: 50px; line-height: 50px; } .sub-arrow { display: block; color: #fff; position: absolute; right: 16px; top: 14px; cursor: pointer; } ul { width: 100%; list-style: none; margin: 0; padding: 0; } li { position: relative; text-align: center; } a { text-transform: uppercase; font-family: $heading-font; font-weight: 600; display: block; text-decoration: none; color: $white-70; height: 50px; line-height: 50px; padding: 0 30px; @include transition(); &:hover { color: $white-color; } } li li a { height: auto; line-height: auto; } ul ul { display: none; } } .header-right { cursor: pointer; z-index: 2; float: right; margin: 12px 0; position: absolute; display: inline-block; top: 0; right: 25px; .search-toggle-open { @include single-transform(270deg); } .search-toggle-open, .search-toggle-close { color: $black-color; cursor: pointer; @include em('font-size', 30); } } .custom-logo-link { display: block; } .site-search { width: 100%; position: fixed; z-index: 98; top: 83px; background: #eaeaea;; visibility: hidden; transform: translateY(-100%) translate3d(0px, 0px, 0px); -webkit-transition: all 0.3s ease; /* Safari */ transition: all 0.3s ease;; input[type="search"] { color: $default-color; } .site-search-inner { width: 100%; } .search-inner { backface-visibility: hidden; padding: 0; z-index: 1; } .search-field { width: 100%; height: 100px; top: 20%; bottom: 50%; left: 0; right: 0; background: transparent; @include border-radius(0px); @include em('font-size', 24); text-align: center; padding-left: 0; padding-right: 0; &:focus { background: transparent; } @include placeholder-color($input-color); } .search-submit { display: none; } } .search-open { .site-search { visibility: visible; -webkit-transform: translateY(0) translate3d(0,0,0); transform: translateY(0) translate3d(0,0,0); } } #s-lightbox { z-index: 97; } .search-open { #s-lightbox { visibility: visible; opacity: .2; } } /*-------------------------------------------------------------- # Header Style 2 --------------------------------------------------------------*/ .header-style-2 { } /*-------------------------------------------------------------- # Header Style 3 --------------------------------------------------------------*/ .header-style-3 { } /*-------------------------------------------------------------- # Header Style 4 --------------------------------------------------------------*/ .header-style-4 { } /*-------------------------------------------------------------- # Header Style 5 --------------------------------------------------------------*/ .header-style-5 { }