flexible, vertically centered navigation

nav.scss

$color-nav-bg: grey
$color-nav-bg-active
$stretch: -100px; // taller/wider than your links would ever need to stretch

  // 1. Set the nav ul  to be table
  .nav-list {
    display: table;
    width: 100%;
  }
  // 2. Set the nav items  to be table-cell
  .nav-item {
    display: table-cell;
    vertical-align: center;
    width: 1%; //  seems to be required?
    overflow: hidden;
  }
  // 3. Set the links 
  .nav-link {
    position: relative;
    z-index: 1; // Set it above the pseudo element bg
    display: block;
    text-align: center;
    background-color: $color-nav-bg;
    &:after {
      content: '';
      position: absolute;
      z-index: -1; //set below the nav
      // 4. stretch the pseudo over the link
      top: $stretch;
      bottom: $stretch;
      left: $stretch;
      right: $stretch;
    }
    &:hover, 
    &:focus,
    &:active {
      background-color: $color-nav-bg-active;
      &:after {
         background-color: $color-nav-bg-active;
      }
    }
  }