sass-site/source/assets/stylesheets/regions/_navigation.scss

// ===========================================================================
// NAVIGATION



.navigation {
  background: $navigation-background-color;
  color: $navigation-text-color;
  @include text-shadow;

  a { @include link(lighten($navigation-text-color, 5%), lighten($navigation-text-color, 15%), lighten($navigation-text-color, 25%)); }

  @include at-breakpoint($break-iPhone) {
    ul {
      padding: 0;
      list-style: none;
    }

    li {
      border-bottom: 1px solid $navigation-border-color;

      &:last-child { border-bottom: 0; }
    }

    a {
      @include tappable-link;
      display: block;
    }
  }

  @include at-breakpoint($break-iPhone-wide) {
    ul {
      @extend %clearfix-iPhone-wide;
      list-style: none;

      li {        
        @include span-columns(2.5, $break-iPhone); 
        margin-right: 0;
      }
      
      a {
        padding: {
          right: 0;
          left: 0;
        }
      }
    }
  }

  @include at-breakpoint($break-iPad) {
    ul li {
      border: 0;
      @include span-columns(3.25, $break-iPad); 
      margin-right: 0;
    }
  }

  @include at-breakpoint($break-iPad-wide) {
    ul li {
      border: 0;
      @include span-columns(4, $break-iPad-wide); 
      margin-right: 0;
    }
  }
}