Just playing around with KFC T&T navigation bar.

_kfc_nav_bar.html.erb

<div class="kfc-navbar kfc-navbar-with-logo">

  <div class="kfc-navbar-logo">
    <a href="#" title="KFC T&T - So Good!">KFC T&amp;T</a>
  </div>

  <div class="kfc-nav-outer-wrapper">
    <div class="kfc-nav-inner-wrapper">

      <nav class="kfc-nav">
        <ul class="kfc-nav-list">
          <li class="kfc-nav-list-item"><a href="#">Food</a></li>
          <li class="kfc-nav-list-item"><a href="#">What's New</a></li>
          <li class="kfc-nav-list-item"><a href="#">About Us</a></li>
          <li class="kfc-nav-list-item"><a href="#">Locations</a></li>
        </ul>
      </nav>

    </div>
  </div>

</div>

kfc.scss

@import "compass";
@import "bootstrap";

@mixin ir($width, $height, $image) {
  display: block;

  width: $width;
  height: $height;

  text-indent: -9999px;

  background: transparent image-url($image) no-repeat;
}

/*
 * KFC Navigation Base
 */
.kfc-navbar {
  .kfc-nav-outer-wrapper {
    padding: 7px 8px;
  }

  .kfc-nav-list {
    @include clearfix;

    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .kfc-nav-list-item {
    float: left;

    & > a {
      display: inline-block;
      padding: 10px 20px;
    }
  }
}

/*
 * KFC Navigation Base Theme
 */
@mixin kfc-nav-list-item-divider {
  @include background-image(
    linear-gradient(color-stops(#d8082a, darken(#d8082a, 20%))),
    linear-gradient(color-stops(#d70729, lighten(#d70729, 20%)))
  );

  background-size: 1px 100%, 1px 100%;
  background-position: 0 0, 1px 0;
  background-repeat: no-repeat;

  padding-left: 1px;
}

.kfc-navbar {
  $kfc-light-red: #da072a;
  $kfc-dark-red: darken($kfc-light-red, 10%);

  .kfc-nav-outer-wrapper {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(192, 192, 192, 0.8);
  }

  .kfc-nav-inner-wrapper {
    @include background-image(
      linear-gradient(color-stops($kfc-light-red, $kfc-dark-red))
    );
  }

  .kfc-nav-list-item {
    @include kfc-nav-list-item-divider;

    &:first-child {
      background-image: none;
      padding-left: 0;
    }
  }

  .kfc-nav-list-item > a {
    color: #fff;

    font-size: 18px;
    font-weight: bold;

    text-shadow: 1px 1px 1px darken($kfc-light-red, 50%);
    text-transform: uppercase;

    @include single-transition(background-color, 1s);

    &:hover {
      background-color: #fff;
      color: $kfc-dark-red;

      text-shadow: 1px 1px 1px #888;
      text-decoration: none;
    }
  }
}

/*
 * KFC Navigation with Logo
 */
.kfc-navbar.kfc-navbar-with-logo {
  $kfc-navbar-logo-top: -32px;
  $kfc-navbar-logo-left: -8px;

  position: relative;

  .kfc-navbar-logo {
    position: absolute;

    top: $kfc-navbar-logo-top;
    left: $kfc-navbar-logo-left;

    & > a {
      @include ir(122px, 160px, 'kfc-navbar-logo.png');
    }
  }

  .kfc-nav-outer-wrapper {
    margin-top: abs($kfc-navbar-logo-top);
    margin-left: 2*abs($kfc-navbar-logo-left);
  }

  .kfc-nav {
    padding-left: 100px;
  }
}

/*
 * KFC Navigation with Logo Theme
 */
.kfc-navbar.kfc-navbar-with-logo {
  .kfc-nav-list-item:first-child {
    @include kfc-nav-list-item-divider;
  }
}