sass/header.scss

.header {
  background: $midgrey;
  border-bottom: 2px solid $orange;
  color: white;
  height: $header-height;
  position: fixed;
  width: 100%;
  z-index: 999;

  .widthWrapper {
    height: 100%;
    position: relative;
  }

  .headerLogo {
    bottom: 0px;
    line-height: 60px;
    position: absolute;
    top: 0px;
    z-index: 1;

    &.hhvmLogo {
      left: 110px + $side-padding;

      .bodyClassHack & {
        @include headerfade;

        &:hover {
          opacity: 1;
        }
      }
    }

    &.hackLogo {
      left: $side-padding;

      .bodyClassHhvm & {
        @include headerfade;

        &:hover {
          opacity: 1;
        }
      }
    }

    a {
      color: white;
      display: block;
      font-family: $header-font;
      font-size: 25px;
      font-weight: 700;
      height: 100%;
      padding-left: 35px;
      position: relative;
      text-decoration: none;
    }
  }

  .githubIssueLink {
    text-align: center;
    font-size: smaller;
    position: absolute;
    left: 0;
    right: 0;
    padding-left: 1em;
    padding-right: 1em;
    a {
      color: $lightgrey;
    }
  }
}

@media only screen and (max-width: $medium-screen-cutoff) {
  .headerElement.githubIssueLink {
    display: none;
  }
}

/* Fix for anchors being hidden under fixed top header */
:target:before {
  content: "";
  display: block;
  height: $header-height + 20px;
  margin: -($header-height + 20px) 0 0;
}

@media only screen and (max-width: 1020px) {
  .header {
    .headerLogo {
      &.hackLogo {
        left: $side-padding-mob;
      }
      
      &.hhvmLogo {
        left: 110px + $side-padding-mob;
      }
    }
  }
}