MAINHACK

Viewing / Editing File: fullScreenHeader.css

/*------------------------------------*
  $FULL SCREEN HEADER
*------------------------------------*/
#site-header.full_screen-header #site-header-inner {
  overflow: visible !important;
}

#site-header.full_screen-header #site-navigation-wrap {
  right: 0;
}

#site-header.full_screen-header #site-logo.has-full-screen-logo {
  position: relative;
  z-index: 101;
}

#site-header.full_screen-header #site-logo.has-full-screen-logo .full-screen-logo-link {
  display: none;
}

#site-header.full_screen-header #site-logo.has-full-screen-logo.opened .custom-logo-link {
  display: none;
}

#site-header.full_screen-header #site-logo.has-full-screen-logo.opened .full-screen-logo-link {
  display: block;
}

#site-header.full_screen-header .menu-bar-wrap {
  float: right;
  height: 100%;
  display: table;
}

#site-header.full_screen-header .menu-bar-inner {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  height: 74px;
}

#site-header.full_screen-header .menu-bar {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  min-width: 38px;
  height: 33px;
  text-align: center;
  z-index: 101;
}

#site-header.full_screen-header .menu-bar .ham {
  display: inline-block;
  width: 23px;
  height: 2px;
  position: relative;
  top: 2px;
  background-color: #333;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -o-transition: all ease .3s;
  transition: all ease .3s;
}

#site-header.full_screen-header .menu-bar .ham:before, #site-header.full_screen-header .menu-bar .ham:after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 23px;
  height: 2px;
  left: 0;
  background-color: #333;
  outline: 1px solid transparent;
  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -o-transition: all ease .3s;
  transition: all ease .3s;
}

#site-header.full_screen-header .menu-bar .ham:before {
  top: -8px;
}

#site-header.full_screen-header .menu-bar .ham:after {
  top: 8px;
}

#site-header.full_screen-header .menu-bar.exit .ham {
  background-color: transparent !important;
}

#site-header.full_screen-header .menu-bar.exit .ham:before, #site-header.full_screen-header .menu-bar.exit .ham:after {
  background-color: #fff;
}

#site-header.full_screen-header .menu-bar.exit .ham:before {
  -webkit-transform: translateY(8px) rotateZ(-45deg);
  -moz-transform: translateY(8px) rotateZ(-45deg);
  -ms-transform: translateY(8px) rotateZ(-45deg);
  -o-transform: translateY(8px) rotateZ(-45deg);
  transform: translateY(8px) rotateZ(-45deg);
}

#site-header.full_screen-header .menu-bar.exit .ham:after {
  -webkit-transform: translateY(-8px) rotateZ(45deg);
  -moz-transform: translateY(-8px) rotateZ(45deg);
  -ms-transform: translateY(-8px) rotateZ(45deg);
  -o-transform: translateY(-8px) rotateZ(45deg);
  transform: translateY(-8px) rotateZ(45deg);
}

#site-header.full_screen-header #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;
}

#site-header.full_screen-header #full-screen-menu #full-screen-menu-inner {
  display: table;
  width: 100%;
  height: 100%;
  padding: 0 40px;
}

#site-header.full_screen-header #full-screen-menu #site-navigation {
  display: table-cell;
  vertical-align: middle;
  padding: 100px 0;
  text-align: center;
}

#site-header.full_screen-header .fs-dropdown-menu {
  list-style: none;
  margin: 0;
}

#site-header.full_screen-header .fs-dropdown-menu li a {
  display: block;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#site-header.full_screen-header .fs-dropdown-menu li a:hover {
  color: #929292;
}

#site-header.full_screen-header .fs-dropdown-menu li > a .nav-arrow {
  padding-left: 5px;
}

#site-header.full_screen-header .fs-dropdown-menu li > a .nav-arrow:before {
  content: '+';
}

#site-header.full_screen-header .fs-dropdown-menu li.open-sub > a .nav-arrow:before {
  content: '-';
}

#site-header.full_screen-header .fs-dropdown-menu ul.sub-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-header.full_screen-header .fs-dropdown-menu ul.sub-menu li a {
  font-size: 16px;
  padding: 6px 0;
}

#site-header.full_screen-header .fs-dropdown-menu > li {
  display: block;
}

#site-header.full_screen-header .fs-dropdown-menu > li > a {
  font-size: 24px;
  line-height: 1.2;
  padding: 12px 0;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li {
  max-width: 220px;
  margin: 10px auto 0;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li form {
  position: relative;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input, #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label {
  font-size: 20px;
  padding: 4px 0;
  color: #fff;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input {
  position: relative;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid #666;
  border-radius: 0;
  z-index: 2;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input:hover, #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input:focus {
  border-color: #fff;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: text;
  opacity: .5;
  z-index: 1;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label i {
  display: inline-block;
  background-color: #fff;
  width: 3px;
  height: 3px;
  margin-left: 3px;
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  -o-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label i + i {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -o-animation-delay: .2s;
  animation-delay: .2s;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label i + i + i {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
  -o-animation-delay: .4s;
  animation-delay: .4s;
}

#site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li form.search-filled label {
  opacity: 0;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
}

#site-header.full_screen-header #oceanwp-social-menu {
  display: block;
  float: none;
  margin-top: 30px;
  text-align: center;
  right: auto;
}

#site-header.full_screen-header #oceanwp-social-menu .social-menu-inner {
  display: block;
  height: auto !important;
}

#site-header.full_screen-header #oceanwp-social-menu ul li {
  float: none;
  display: inline-block;
}

#site-header.full_screen-header #oceanwp-social-menu.simple-social ul li a {
  color: #fff;
  font-size: 24px;
  padding: 0 16px;
}

#site-header.full_screen-header #oceanwp-social-menu.simple-social ul li a:hover {
  color: #929292;
}

#site-header.full_screen-header #oceanwp-social-menu .colored ul li a,
#site-header.full_screen-header #oceanwp-social-menu .minimal ul li a,
#site-header.full_screen-header #oceanwp-social-menu .dark ul li a {
  padding: 0 4px;
}

#site-header.full_screen-header #oceanwp-social-menu .colored ul li a span,
#site-header.full_screen-header #oceanwp-social-menu .minimal ul li a span,
#site-header.full_screen-header #oceanwp-social-menu .dark ul li a span {
  font-size: 16px;
  width: 60px;
  height: 60px;
  line-height: 60px;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    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;
  }
  #site-header.full_screen-header #site-logo.has-full-screen-logo.opened .full-screen-logo-link {
    display: none;
  }
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: fullScreenHeader.css

Server Info

System Features

User Info