File "_page-header.scss"

Full Path: /home/amervokv/ecomlive.net/wp-content/themes/oceanwp/sass/components/_page-header.scss
File size: 5.52 KB
MIME-type: text/plain
Charset: utf-8

.page-header {
  position: relative;
  background-color: $color-16;
  padding: 34px 0;

  .container {
    position: relative;
  }
}

.has-transparent-header .page-header {
  padding: 120px 0 36px 0;
}

body.home .page-header-inner {
  text-align: center;
}

.page-header-title {
  display: block;
  font-size: 24px;
  line-height: 1.4em;
  font-weight: 400;
  margin: 0;
  color: $color-2;
}

body.breadcrumbs-position-default .page-header-title {
  max-width: 70%;
}

.page-subheading {
  font-size: 15px;
  margin: 0;

  p:last-child {
    margin: 0;
  }
}

.centered-page-header .page-header-title,
.centered-minimal-page-header .page-header-title {
  max-width: 100% !important;
}

/**
 * Page Header Centered
 */
.centered-page-header {
  text-align: center;

  .page-header-title {
    font-size: 32px;
  }

  .page-subheading {
    font-size: 18px;
    font-weight: 300;
  }
}

/**
 * Page Header Minimal Centered
 */
.centered-minimal-page-header {
  background-color: #fff;
  border-bottom: 1px solid $color-9;
  text-align: center;

  .page-header-title {
    font-size: 32px;
  }

  .page-subheading {
    font-size: 18px;
    font-weight: 300;
  }
}

/**
 * Page Header Solid Color
 */
.solid-color-page-header .page-header-title {
  color: #fff !important;
}

.solid-color-page-header .site-breadcrumbs,
.solid-color-page-header .site-breadcrumbs a {
  color: #fff !important;
}

.solid-color-page-header .page-subheading {
  color: #fff;
}

/**
 * Page Header Background Image
 */
.background-image-page-header {
  @include display();
  @include align-items( center );
  width: 100%;
  background-color: #000;
  height: 400px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;

  .page-header-inner {
    text-align: center;
  }

  .page-subheading {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    z-index: 2;
  }
}

.page-header.background-image-page-header .page-header-title {
  position: relative;
  color: #fff;
  font-size: 44px;
  font-weight: 400;
  max-width: 100%;
  z-index: 2;
}

.background-image-page-header-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  z-index: 1;
  @include opacity( 0.5 );
}

/**
 * Breadcrumbs
 */
.site-breadcrumbs {
  position: absolute;
  right: 0;
  top: 50%;
  max-width: 50%;
  height: 32px;
  line-height: 32px;
  margin-top: -16px;
  font-size: 13px;
  color: #c6c6c6;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;

  ol {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      .breadcrumb-sep {
        margin: 0 6px;
      }
    }
  }

  &.woocommerce-breadcrumbs {
    .breadcrumb-sep {
      margin: 0 6px;
    }
  }

  .icon-home.has-text,
  .breadcrumb-home.has-icon {
    display: none;
  }

  .breadcrumb-title {
    margin-right: 5px;
  }

  .owp-icon {
    vertical-align: text-top;
  }
}

.site-breadcrumbs.position-under-title,
.centered-page-header .site-breadcrumbs,
.centered-minimal-page-header .site-breadcrumbs {
  position: inherit;
  top: auto;
  right: auto;
  margin-top: 0;
  max-width: 100%;
}

.oceanwp-breadcrumb .site-breadcrumbs {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  max-width: 100%;
  margin-top: 0;
}

.background-image-page-header .site-breadcrumbs {
  display: block;
  position: inherit;
  max-width: 100%;
  margin-top: 20px;
  top: auto;
  right: auto;
  color: #fff;
  text-align: center;
  z-index: 2;

  a {
    color: #fff;

    &:hover {
      color: #ddd;
    }
  }
}

/* compatibility with SEOPress */
.site-breadcrumbs nav,
.site-breadcrumbs ol {
  margin: 0;
}

.elementor {
  .site-breadcrumbs {
    position: relative;
    display: block;
    overflow: visible;
  }
}

/*------------------------------------*
  All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {
      
  /* page title */
  body.has-breadcrumbs .page-header-title {
    max-width: 100%;
    width: 100%;
  }
  
}

/*------------------------------------*
  Tablet Portrait
*------------------------------------*/
@media only screen and (max-width: 959px) {
  
  /* page header */
  .site-breadcrumbs {
    position: inherit;
    top: auto;
    left: auto;
    right: auto;
    max-width: 100%;
    margin-top: 0;
  }
  
}

/*------------------------------------*
  Phone Portrait and Landscape
*------------------------------------*/
@media only screen and (max-width: 767px) {

  /* Remove fixed background to fix the IOS bug */
  .page-header {
    background-attachment: initial !important;
  }

  /* page header */
  .page-header-with-background .page-header-title {
    font-size: 36px;
  }

  .centered-page-header .page-header-title,
  .centered-minimal-page-header .page-header-title,
  .page-header.background-image-page-header .page-header-title {
    font-size: 24px;
  }

  .centered-page-header .page-subheading,
  .centered-minimal-page-header .page-header-subheading,
  .page-header.background-image-page-header .page-subheading {
    font-size: 14px;
  }

  .background-image-page-header {
      height: auto !important;
  }
  
  /* breadcrumbs */
  body.has-breadcrumbs .page-header-title {
    max-width: 100%;
    width: 100%;
  }
  
}