csw4-7.scss

.navigation {
  // ...
  &__hamburger {
    margin-top: 2rem; // middle line 'meat' of burger
    position: relative;
    
    // this sets the style for all 3 lines
    &,
    &::before,
    &::after {
      // same hamburger-box width
      width: 4rem;
      height: 2px;

      // make sure each is its own line
      display: block;

      background-color: #FFF;
    }
    
    // set content so they actually render
    // set to absolute so we can position relative to middle line
    &::before,
    &::after {
      content: "";
      position: absolute;
    }
    
    // position each line relative to middle
    &::before { top: -2rem; }
    &::after { top: 2rem; }
  }
}