docs/docs/_sass/components/_doc-header.scss
// DOC HEADER
// -----------------------------------------------
// -----------------------------------------------

.doc-header {
    display: flex;
    align-items: center;
    height: ($base-point-grid * 8);
    background: $white;
    border-bottom: 1px solid $doc-header-border;

    .search-wrapper {
        display: flex;
        position: relative;
        width: 100%;

        .search {
            display: block;
            width: calc(100% - 1.5rem);
            padding: $base-point-grid 0;
            font-family: $base-font-family;
            font-size: $base-docs-font-size;
            margin-left: 1.5rem;
            border: none;
            cursor: auto;
            position: relative;
            outline: none;
             -webkit-appearance: textfield;
        }

        /* clears the 'X' from Internet Explorer */
        input[type=search]::-ms-clear {
            display: none;
            width: 0;
            height: 0;
        }

        input[type=search]::-ms-reveal {
            display: none;
            width: 0;
            height: 0;
        }

        /* clears the 'X' from Chrome */
        input[type="search"]::-webkit-search-decoration,
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-results-button,
        input[type="search"]::-webkit-search-results-decoration {
            display: none;
        }
    }

    a {
        &:hover {
            text-decoration: none;
        }
    }

    .fa {
        margin-right: ($base-point-grid / 2);
    }

    .menu-doc-search {
      display: inline-flex;

      .menu-links {
        padding-bottom: 4px;
        text-transform: uppercase;
        font-weight: $font-semibold;
        @include links($link-color, $link-color, lighten($link-color, 30%), lighten($link-color, 30%));

        &:hover {
          text-decoration: none;
        }
      }
      &:last-child {
          margin-right: ($base-point-grid * 2);
      }
    }
}

// Responsive
@include bp(large) {
  #doc-wrapper {
    .doc-header {
      .doc-stars-container {
        display: none;
      }
    }
  }
}

@include bp(medium) {
  #doc-wrapper {
    .doc-header {
      position: sticky;
      top: 0;
      z-index: 11;
    }
  }
}
