Блог

Я хотел бы использовать Shopify / заголовок навигации из другого шаблона Shopify на моем собственном сайте Shopify… интересно, как я мог бы это сделать? Я уже заплатил за шаблон Ira, однако я бы предпочел использовать заголовок навигации из Cascade.

Любые предложения будут высоко оценены!

Я считаю, что это тот CSS, который мне нужен, но не знаю, как перевести его для моего собственного сайта:

 /* =======================================================================

Header Active (Modal)
========================================================================== */
.header__active {
  display: none;
  opacity: 0;
  transition: opacity 0.1s cubic-bezier(0.46, 0.01, 0.32, 1);
}

.header__shifter {
  height: 0;
  transition: all 0.2s cubic-bezier(0.46, 0.01, 0.32, 1);
}

.header__close {
  display: none;
  z-index: 50;
}

.site-header.full-height {
  height: 100vh;
}

.site-header {

  .announcement-bar,
  .header__logo {
    opacity: 1;
    pointer-events: auto;
  }

  .announcement-bar {
    transition: opacity 0.3s cubic-bezier(0.46, 0.01, 0.32, 1);
  }
}

.site-header.active {
  background-color: $active-background;
  color: $active-text;
  overflow-y: scroll;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  @include media-query($large-up) {
    .header__shifter {
      height: 43px;
    }
  }

  @include media-query($medium-down) {
    .header-table {
      display: none;
    }
  }

  .header__close {
    display: block;
    transition: all 0.2s cubic-bezier(0.46, 0.01, 0.32, 1);

    svg {
      transition: all 0.2s cubic-bezier(0.46, 0.01, 0.32, 1);
    }
  }

  .header__close:hover {
    svg {
      transform: scale(1.2);
    }
  }

  .header__active {
    display: block;
  }

  .header__active.visible {
    opacity: 1;
  }

  .announcement-bar,
  .header__logo {
    opacity: 0;
    pointer-events: none;
  }

  .header-table__center {
    //max-width: 50px;
    overflow: hidden;
  }

  .header-table,
  .header__active {
    z-index: 1;
  }

  .nav__container {
    overflow: unset;
  }

  .header__link.isSelected .header__link-wrapper,
  .header__link:hover .header__link-wrapper {
    border-bottom: 1px solid $active-text;
  }

  .header__active-overlay {
    display: block;
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0;
    z-index: -1;
  }

  .header__meta {
    flex-grow: 0;
    flex-basis: auto;
  }

  .site-nav {
    white-space: normal;
  }
}



// header active
.site-header.active {
  .color--header-active {
    color: $active-text;
  }

  .border-bottom--header--active {
    border-bottom: 1px solid $active-text;
  }
}


/* =======================================================================

No JS
========================================================================== */

//stylelint-disable
.no-js {
  .site-header {
    position: static;

    nav ul {
      white-space: normal;
    }

    .no-js--submenu {
      display: none;
    }

    .site-nav--has-submenu:hover .no-js--submenu {
      display: block;
      z-index: 100;
    }
  }

  .no-js__navigation {
    display: none;
  }

  .nav-open {
    .nav-open__close {
      display: none;
    }
  }

  #nav:checked .nav-open {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10;

    .nav-open__default {
      display: none;
    }

    .nav-open__close {
      display: block;
    }
  }

  #nav:checked~.no-js__navigation {
    display: block;
    padding-top: 100px;
    overflow-y: scroll;
  }

  .item.fade-in {
    @include opacity(1);
    float: left;
  }

  .image-with-text__container .item--image {
    width: 100%;
  }
}


/* =======================================================================

Header
========================================================================== */

.color--header-active {
  @include transition(color, 0.2s, ease-in-out);
}

@include media-query($large-up) {
  .sticky-header-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: transparent;
    @include transition(background-color, 0.2s, ease-in-out);
  }
}

.is-header-transitioning {
  display: block !important;
  visibility: visible !important;
  height: 100vh !important;

}

.site-logo {
  display: inline-block;

  img {
    display: block;
    width: 100%;
  }
}

.site-header__menu-btn {
  height: 100%;
  line-height: 100%;

  .icon-wrapper {
    margin-left: -10px;
  }

  svg {
    vertical-align: -10px;
  }
}

.site-header {
  background-color: transparent;
  z-index: 10;
  transition: background-color 0.2s ease-in-out;
}

.header-table__center {
  padding-bottom: 0.3rem;
}

.header__link-wrapper {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
}

.site-nav__svg {
  //padding-left: 0.5rem;
  padding-bottom: 0.1rem;
}

.cart__icon {
  margin-right: -0.3rem;
}

.header__active-overlay {
  display: none;
}

.banner__placeholder-svg {
  @include opacity(0.2);
  background-color: $placeholder-light;

  svg {
    width: 100%;
    height: 100%;
  }
}


@include media-query($large-up) {
  .header-static-color {
    color: $color-primary-text;

    amp;:hover .header__link-wrapper {
      border-color: $color-primary-text;
    }
  }
}


[data-desktop-banner-image]:after {
  content: '';
  display: none;
}

@include media-query($large-up) {
  [data-desktop-banner-image]:after {
    content: 'watch';
    display: none;
  }
}