schulzestudio/src/css/layout/_nav.scss

/* Nav */

  #nav {
    @include vendor('transition', (
      'height #{_duration(transition)} ease',
      'background #{_duration(transition)} ease',
    ));
    height: 80px;
    position: fixed;
    width: 100%;
    background: #f2f2f2;

    &.scrolled {
      background: #ffffff;
    }

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

      > #menuToggle {
        @include vendor('transition', (
          'padding #{_duration(transition)} ease',
        ));
        display: inline-block;
        cursor: pointer;
        padding: calc(47px/2);

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

          }

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

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

          &.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)');
              transform: rotate(-45deg);
            }
          }
        }
      }
    }

    @include breakpoint('<=xlarge') {

    }

    @include breakpoint('<=large') {

    }

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

      > #wrapper > #menuToggle {
        padding: calc(35px/2);

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

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

    @include breakpoint('<=small') {

    }

    @include breakpoint('<=xsmall') {

    }

    @include breakpoint('<=xxsmall') {

    }
  }