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;

      > a > #logo > img {
        @include vendor('transition', (
          'height #{_duration(transition)} ease',
          'left #{_duration(transition)} ease',
        ));
        position: absolute;
        cursor: pointer;
        height: 80px;
        padding: 10px 23.1px;
        left: calc(50% - 40px);
      }

      > #menuToggle {
        display: inline-block;
        cursor: pointer;
        padding: 23.5px 18.5px;

        > 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',
          	));

          }

          &.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 {

        > a > #logo > img {
          height: 60px;
          padding: 7.5px 17.3px;
          left: calc(50% - 30px);
        }

        > #menuToggle {
          padding: 17.5px 14px;

          > 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') {

    }
  }