static/scss/nav.scss
@import "globals";

$NAV_BG: #1b1e24;

#nav-header {
  background: $NAV_BG;
  padding: 23px 30px;
  position: relative; // Just for the z-indexing needs
  z-index: $BASE-INDEX + 5;
  overflow: hidden;

  h1 {
    @include image-text($background: url(/static/images/nav_logo.png), $width: 352px, $height: 36px);
    float: left;
  }

  ul {
    float: right;
    li {
      a {
        color: #fff;
        text-decoration: none;
      }
      display: inline-block;
      padding: 4px 15px 0;
      @include font-light();
      color: #fff;

      &.user-divider:before {
        content: '|';
        position: relative;
        left: -15px;
      }
    }
  }

  //
  // MOBILE STYLES
  //

  @media screen and (max-width: $MOBILE-WIDTH) {

    padding: 20px 60px 10px 20px;

    a {
      display: block;
    }

    h1 {
      max-width: 100%;
      background-size: contain;
      margin-right: 75px;
      float: none;
    }

    nav {

      &:before {
        content: '';
        display: block;
        position: absolute;
        width: 45px;
        right: 0;
        top: 0;
        bottom: 0;
      }

      &:after {
        content: '';
        border: 7px solid transparent;
        border-top-color: #fff;
        position: absolute;
        right: 15px;
        top: 30px;
      }

      &.show {

        &:before {
          background: $darkGrey;
        }

        ul {
          display: block;
          z-index: $BASE-INDEX + 20;
        }

      }

    }

    ul {
      float: none;
      display: none;
      position: relative;

      li {
        display: block;
        font-size: 18px;
        padding: 10px 0;

        &.user-divider {
          border-top: 1px solid #fff;
          margin-top: 5px;
          padding-top: 15px;
          &:before {
            display: none;
          }
        }
      }
    }

  }

}

.bracket-nav {
  background: rgba($NAV_BG, .75);
  display: flex;
  justify-content: space-around;
  z-index: 6;

  &__list {
    display: flex;
  }

  &__item {
    padding: spacing(4);
  }

  &__link {
    font: 18px/1 Roboto, sans-serif;
    color: #fff;
    text-decoration: none;
  }

  // Since none of the extra pages are mobile optimized, hide the
  // secondary nav for mobile users until I probably rewrite the
  // entire damn site...
  @media screen and (max-width: $MOBILE-WIDTH) {
    display: none;
  }
}