.site-navbar {
  @extend .grid-x,
  .align-middle,
  .align-spaced;
  @include breakpoint(medium) {
    padding: $site-navbar-padding;
  }
  position: fixed;
  background-color: white;
  @include breakpoint(small only) {
    width: 100%;
    min-height: $site-navbar-responsive-height;
    align-content: center;
    box-shadow: 0 2px 4px 0 rgba(161, 157, 157, 0.4);
  }
  @include breakpoint(medium up) {
    width: 100%;
    min-height: $site-navbar-height;
    @include flex-align($x: justify, $y: middle);
  }
  &__site-link-popover {
    width: 100%;
    padding: rem-calc(10 35);
    color: $dark-gray;
    font-weight: $site-link-weight;
    text-transform: capitalize;
    @include breakpoint(small only) {
      text-align: center;
    }
    &:hover,
    &:focus {
      color: $black;
      outline: none;
    }
    &--active {
      color: $black;
      border-bottom: 2px solid $primary-color;
      padding: rem-calc(10 15) !important;
      margin: 0 20px;
    }
  }
 
}