%nav-item-stack {
  display: inline-block;
  padding: 5px 10px 0;
  text-align: center;

  .nav-item-tab {
    padding: 5px 10px 0;
  }
  .nav-item-icon {
    font-size: 20px;
  }
  .nav-item-label {
    display: inherit;
    font-size: font-size(100);
    line-height: 1;
  }
}

.navbar {
  @extend %card-style;
  position: relative;
  border: 0;
  border-radius: 0;
  background-color: $color-nav-bg;

  .navbar-brand {
    display: block;
    padding: 10px 0 10px 10px;
    height: $header_height;

    @media (min-width: $grid-float-breakpoint) {
      padding-right: 30px;
    }

    .navbar-brand-logo {
      width: 190px;
    }
  }

  .nav-item-stack {
    @extend %nav-item-stack;
  }

  .navbar-right {
    text-align: right;

    @media (max-width: $grid-float-breakpoint) {
      background-color: color('gray-100');
      margin-bottom: 0;
      padding-bottom: 8px;
    }
  }

  .navbar-toggle {
    padding: 10px;
    border: 0;

    &:hover,
    &:active,
    &:focus {
      background-color: transparent;
    }
  }
  .navbar-collapse {
    @extend %card-style;

    @media (min-width: $grid-float-breakpoint) {
      @include box-shadow(none);
      @include text-shadow(none);
    }
    @media (max-width: $grid-float-breakpoint) {
      border-top: 0;
    }
  }

  .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
  }

   //nuke bootstrap navbar a tag psuedo-selectors
  .navbar-nav > .open > a {
    color: $color-nav-hover;
    background-color: $color-nav-active;
    border-color: color('secondary');
    &:hover,
    &:active,
    &:focus {
      color: $color-nav-hover;
      background-color: $color-nav-active;
    }
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    &:hover,
    &:active,
    &:focus {
      color: $color-nav-hover;
    }
  }
}

.navbar-fixed-top {
  .navbar-collapse {
    max-height: none;
  }
}

.navbar-dropdown {
  .nav,
  .collapse
  .dropup,
  .dropdown {
    position: inherit;
    &.dropdown-left {
      position: relative;
      .dropdown-menu-nav {
        right: 0;
      }
    }
  }
}

.nav.navbar-nav.navbar-right {
  position: relative;

  // switches at screen collapse breakpoint
  @media(max-width: $grid-float-breakpoint) {
    padding: 10px 0 10px 15px;
    min-height: 70px;
  }
}