Nav Module

nav.scss

@mixin nav {
  .nav {
    height: $nav-height;
    position: relative;
    z-index: 10;

    li > a {
      color: $color-brand;
      height: $nav-height;
      line-height: $nav-height;
      margin: 0;
      text-decoration: none;
      padding: 10px 15px;

      @include sm {
        &.is-active,
        &:hover {
          background: $color-brand;
          color: white;
        }
      }
    }
  }

  .nav-brand {
    line-height: $nav-height;
    position: relative;
  }

  .nav-logo {
    &:hover {
      background: transparent !important;
    }

    img {
      display: inline-block;
      margin-top: -10px;
      height: 50px;
      vertical-align: middle;
      width: auto;
    }
  }

  .nav-with-logo {
    .nav-name {
      display: none;

      @include sm {
        display: block;
      }
    }
  }

  .nav-menu {
    background: white;
    transition: 0.3s all ease-in-out;
    left: 0;
    margin-top: $nav-height;
    position: absolute !important;
    top: 0;
    width: 100%;

    &.collapse {
      display: none;

      &.in {
        display: block;
      }
    }

    @include sm {
      background: transparent;
      display: block !important;
      height: $nav-height !important;
      margin: 0;
      transition: none;
      width: auto;

      li > a {
        .is-active,
        &:hover {
          background: $color-brand;
          color: white;
        }
      }
    }
  }

  .nav-menu-items {
    @include sm {
      text-align: right;
    }
  }

  .nav-menu-item {
    display: inline-block;

    @include sm {
      float: none !important;
      width: auto !important;
    }
  }
}