css-BEAM-example.css

// Menu styles
.menu {
  @extend %flex-container;
  box-shadow: 0px 2px 2px rgba(30, 30, 30, 0.42);
  height: 72px;
  top: 0;
  font-family: $font-family--primary;
  position: fixed;
  width: 100vw;
  z-index: 900;
  flex-flow: row;
  justify-content: space-between;
  @include m(bgblack){
    background-color: $black-dark;
    border: $black-dark;
  };
  &--bgwhite {
    background-color: $white;
    border: $white;
  }
  &__logo {
    width: 100%;
    height: 100%;
    display: block;
    padding: 10px 0;
    img {
      width: 200px;
      height: 100%;
    }
  }
  &__row {
    @for $i from 1 through 10 {
      &--#{$i} {
        width: ($i * 10%);
      }
    }
  }
  @include e(item) {
    width: auto;
    margin-right: 35px;
    align-self: center;
    position: relative;
    span{
      margin-top: 3px;
    }
    &__sub {
      display: none;
      opacity: 0;
      position: absolute;
      background-color: $white;
      padding: 10px 0;
      transition: all 0.3s ease-in-out;
      a {
        margin-top: 10px;
        font-size: 13px;
        transition: all 0.3s ease;
        padding: 10px 20px;
        &:hover {
          background-color: #f9f9f9;
        }
      }
    }
    @include m(mobile-icon) {
      width: 100%;
      color: $white;
      font-size: 20px;
      @extend %flex-container;
      justify-content: flex-end;
      display: none;
      i {
        padding: 5px 16px;
        align-self: center;
      }
    }
  }
  @include e(link) {
    text-decoration: none;
    color: $menu-link;
    font-size: 15px;
    font-weight: 300;
    display: block;
    position: relative;
    transition: color 0.4s ease 0s;
    &__home {
      width: 17px;
      height: 17px;
      cursor: pointer;
      background-image: image-url("icons/home-icon.png");
      background-repeat: no-repeat;
      background-size: cover;
      margin-bottom: 3px;
    }
    &:hover {
      text-decoration: none;
      color: $red-light;
      .menu__link__home {
        background-image: image-url("icons/home-icon-red.png");
      }
    }
    &:focus {
      color: $red-light;
      outline: none !important;
      text-decoration: none !important;
      text-decoration: none !important;
    }
    &--active {
      color: $red;
      &:hover { color: $red; }
      .menu__link__home {
        background-image: image-url("icons/home-icon-red.png");
      }
    };
  }
}

// Menu mobile styles
.menu__mobile {
  position: fixed;
  width: 100vw;
  height: 100vh;
  right: 0;
  top: 0;
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  transform: translateX(100%);
  z-index: 9999;
  transition: all 0.5s ease;
  &.mobile-active {
    transform: translateX(0%);
    .menu__mobile__cover {
      opacity: 1;
    }
  }
  &__cover {
    position: absolute;
    background-color: rgba($black, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition-delay: 2s;
    transition: all 0.5s ease;
  }
  &__container {
    overflow: auto;
    width: 50%;
    height: 100%;
    padding: 20px 0;
    background-color: $white;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: stretch;
    z-index: 99999;
  }
  .menu__item--mobile {
    width: 100%;
    &:not(:first-child) { margin-top: 2vh; }
    background-color: #f4f4f4;
    a.menu__link {
      text-align: left;
      padding: 4vh 20px;
      font-size: 18px;
      color: $title-color;
      display: flex;
      flex-flow: row;
      align-items: center;
      > i { width: 20px; }
      > span { margin-left: 10px; }
      &:hover {
        text-decoration: none;
        color: $red-light;
      }
      &:focus {
        color: $red-light;
        outline: none !important;
        text-decoration: none !important;
        text-decoration: none !important;
      }
      &--active { color: $red; }
    }
  }
}