.site-header {

position: fixed;
top:0;
left:0;
width:100%;
height:60px;
display: flex;
align-items: center;
background-color:$header-color;
border-bottom:2px solid $theme-color;
padding-left:20px;
font-weight: 600;

}

.site-title {

@include relative-font-size(1.625);
letter-spacing: -1px;
margin-bottom: 0;
float: left;
&:hover {
  text-decoration: none;
}
@include media-query($on-mobile) {
  padding-right: 45px;
}

}

.site-icon {

position: absolute;
left: 50%;
top: 100%;
margin-top: -47px;
width: 70px;
height: 70px;
padding: 14px;
background: $content-color;
border-radius: 50%;
@include media-query($on-mobile) {
  width: 50px;
  height: 50px;
  margin-top: -25px;
}

}

.site-nav {

  position: absolute;
  top: 9px;
  right: $spacing-unit / 2;
  border-radius: 5px;
  text-align: right;
  .nav-trigger {
      display: none;
  }
  .menu-icon {
    float: right;
    width: 36px;
    height: 26px;
    line-height: 0;
    padding-top: 10px;
    text-align: center;
    > svg path {
      fill: $theme-color;
    }
  }
  label[for="nav-trigger"] {
    display: block;
    float: right;
    width: 36px;
    height: 36px;
    z-index: 2;
    cursor: pointer;
  }
  input ~ .trigger {
    clear: both;
    display: none;
  }
  input:checked ~ .trigger {
    display: block;
    background:$header-color;
    border-radius:20px;
    padding:10px;
  }
  .page-link {
    display: block;
    padding: 5px 10px;
    // Gaps between nav items, but not on the last one
    &:not(:last-child) {
      margin-right: 0;
    }
    &:hover {
      text-decoration: none;
    }
  }
  @media screen and (min-width: $on-laptop) { 
      flex:1;
      position: static;
      float: right;
      border: none;
      background-color: inherit;
      height:100%;
      label[for="nav-trigger"] {
          display: none;
      }
      .menu-icon {
          display: none;
      }
      input ~ .trigger {
          display: block;
          height:100%;
      }
      .page-link {
          display: inline-flex;
          align-items:center;
          height:100%;
          &.active {
            background-color:$theme-color;
            color:$header-color;
          }
      }
  }
}