schulzestudio/src/css/layout/_nav.scss

/* Nav */

  #nav {
    @include vendor('transition', (
      'height #{_duration(transition)} ease',
      'background #{_duration(transition)} ease',
    ));
    top: 0;
    height: 80px;
    position: fixed;
    width: 100%;
    background: _palette(bg);
    z-index: 999999999;

    &.scrolled {
      background: _palette(white);
    }

    > #menu {

      > ul {
        @include vendor('transition', (
          'opacity #{_duration(transition2)} ease',
        ));
        text-align: center;
        opacity: 0;
        position: fixed;
        color: _palette(white);
        right: 0;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);

        > li {
          transform: translate3d(0,0,0);
          margin: 0 40%;

          > a {
            line-height: 3em;
            margin: 1em 0;
            display: block;
            border-bottom: none;
            position: relative;
              @include vendor('transition', (
                'color #{_duration(transition2)} ease',
              ));

            &:hover {
              color: _palette(menu);
            }
          }

          &:before {
            @include vendor('transition', (
              'width #{_duration(transition2)} ease',
            ));
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: auto;
            background-color: _palette(white);
            width: 0;
            pointer-events: none;
          }
          &:hover {
            &:before {
              left: 0;
              right: auto;
              width: 100%;
            }
          }
        }
      }

      > span {
        @include vendor('transition', (
          'box-shadow #{_duration(transition2)} ease',
        ));
        content: "";
        display: block;
        position: absolute;
        height: 1px;
        width: 1px;
        border-radius: 50%;
        box-shadow: 0 0 0 0 _palette(menu), 0 0 0 0 _palette(menu);
        top: 40px;
        left: 40px;
      }

      > #blocker {
        top: 80px;
        width: 100vw;
        height: 100vh;
        position: absolute;
        display: none;
      }

      &.show {
        > ul {
          display: block;
          opacity: 1;
        }

        > #blocker {
          display: block;
        }

        > span {
          box-shadow: 0 0 0 142vw _palette(menu), 0 0 0 142vh _palette(menu);
        }
      }
    }

    > #wrapper {
      margin: auto;
      line-height: 11px;

      > a > #icon > img {
        @include vendor('transition', (
          'height #{_duration(transition)} ease',
          'left #{_duration(transition)} ease',
          'filter #{_duration(transition)} ease',
        ));
        @include vendor('filter', 'grayscale(1)');
        position: absolute;
        cursor: pointer;
        height: 80px;
        padding: 10px 23.1px;
        left: 0;
        right: 0;
        margin: auto;

        &:hover {
          @include vendor('filter', 'grayscale(0)');
        }
      }

      > #menuToggle {
        @include vendor('transition', (
          'filter #{_duration(transition)} ease',
        ));
        display: inline-block;
        cursor: pointer;
        padding: 23.5px 18.5px;
        user-select: none;
        -webkit-tap-highlight-color: transparent;

        &:hover > span.bar {
          @include vendor('filter', 'grayscale(0)');
        }

        > span {
          &.bar {
            @include vendor('transition', (
              'transform #{_duration(transition2)} ease',
              'width #{_duration(transition)} ease',
              'filter #{_duration(transition)} ease',
            ));
            @include vendor('filter', 'grayscale(1)');
            height: 3px;
            display: block;
            border-radius: 1.5px;
          }

          &.bar1 {
            @include vendor('transform-origin', '30px 1.5px');
            width: 30px;
            background: _palette(accent1);
            margin: auto;

            &.active {
              @include vendor('transform', 'rotate(45deg)');
              @include vendor('filter', 'grayscale(0)');
            }
          }

          &.bar1:first-child {
            @include vendor('transform-origin', '0 1.5px');
          }

          &.bar2 {
            width: 43px;
            background: _palette(accent2);
            margin: 12px 0;

            &.active {
              @include vendor('transform', 'rotate(-45deg)');
              @include vendor('filter', 'grayscale(0)');
            }
          }
        }
      }
    }

    @include breakpoint('<=xlarge') {

    }

    @include breakpoint('<=large') {

    }

    @include breakpoint('<=medium') {
      height: 60px;

      > #menu {
        > span {
          top: 30px;
          left: 30px;
        }

        > #blocker {
          top: 60px;
        }
      }

      > #wrapper {

        > a > #icon > img {
          height: 60px;
          padding: 7.5px 17.3px;
        }

        > #menuToggle {
          padding: 17.5px 14px;

          > span {
            &.bar1 {
              @include vendor('transform-origin', '22px 1.5px');
              width: 22px;
            }

            &.bar2 {
              width: 32px;
              margin: 8px 0;
            }
          }
        }
      }
    }

    @include breakpoint('<=small') {

    }

    @include breakpoint('<=xsmall') {

    }

    @include breakpoint('<=xxsmall') {

    }

  }