embd/bower_components/gumby/sass/ui/_navbar.scss

/* Navigation (with dropdowns) */

.navbar {
  width: 100%;
  min-height: 60px;
  display: block;
  margin-bottom: 20px;
  background: $navbar-color; // Change this color in settings to change the navbar color
  position: relative;
  @include respond(all-phones) {
    border: none;
    .column, .columns {
      min-height: 0;
    }
  }

  &.fixed {
    position: fixed;
    z-index: 99999;
  }
  &.pinned {
    position: absolute;
  }
  a.toggle {
    display: none;

    // Navigation Toggle Mobile styles
    @include respond(all-phones) {
      top: 18%;
      right: 4%;
      width: 46px;
      position: absolute;
      text-align: center;
      display: inline-block;
      color: $navbar-link-color;
      background: $navbar-color;
      @include line-and-height(40px);
      @include border-radius($button-radius);
      @include font-size($larger);
      &:hover {
        background: lighten($navbar-color, 5%);
      }
      &:active, &.active {
        background: darken($navbar-color, 5%);
      }
    }
  }
}

.navbar .logo {
  display: inline-block;
  margin: 0 $gutter 0 0;
  padding: 0;
  @include line-and-height(height-calc($larger - 3));
  a {
    display: block;
    padding: 0;
    overflow: hidden;
    @include line-and-height(height-calc($larger - 3));
    img {
      max-height: 95%;
    }
  }

  // Navbar Logo Mobile Styles
  @include respond(all-phones) {
    float: $default-float;
    display: inline;
    a {
      padding: 0;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
      }
    }
  }
}

.navbar ul {
  display: table;
  vertical-align: middle;
  margin: 0;
  float: none;

  // Navbar Navigation List Mobile Specific Styles
  @include respond(all-phones) {
    position: absolute;
    display: block;
    width: 100% !important;
    height: 0;
    max-height: 0;
    top: 60px;
    left: 0;
    overflow: hidden;
    text-align: center;
    background: darken($navbar-color, 5%);
    &.active {
      height: auto;
      max-height: 600px;
      z-index: 999998;
      @include transition-duration(.5s);
      @include box-shadow(0 2px 2px darken($navbar-color, 15%));
    }
  }

  li {
    display: table-cell;
    text-align: center;
    padding-bottom: 0;
    margin: 0;
    @include line-and-height(height-calc($larger - 3));

    // Navbar List Item Mobile Specific Styles
    @include respond(all-phones) {
      display: block;
      position: relative;
      min-height: 50px;
      max-height: 320px;
      height: auto;
      width: 100%;
      border-right: 0 !important;
      @include box-shadow(none);
      @include transition-duration(.5s);
    }

    > a {
      display: block;
      padding: 0 ms(0);
      white-space: nowrap;
      color: $navbar-link-color;
      text-shadow: 0 1px 2px darken($navbar-color, 20%),
                   0 1px 0 darken($navbar-color, 20%);
      @include line-and-height(height-calc($larger - 3));
      @include font-size($norm);
      i.icon-popup {
        position: absolute;
      }
    }
    .btn {
      border-color: darken($navbar-color, 30%) !important;
    }
    &.field {
      margin-bottom: 0 !important;
      margin-right: 0;
      @include respond(all-phones) {
        padding: 0 $gutter-in-px;
      }
      input.search {
        background: darken($navbar-color, 20%);
        border: none;
        color: $default-color;
      }
    }
    .dropdown {
      width: auto;
      min-width: 0;
      max-width: $min-device-width;
      height: 0;
      position: absolute;
      background: lighten($default-color, 3%);
      overflow: hidden;
      z-index: 999;
    }
    // Navigation Dropdown Mobile Specific Styles
    @include respond(all-phones) {
      .dropdown {
        width: 100%;
        max-width: 100%;
        position: relative;
        @include box-shadow(none !important);
      }
      &.active .dropdown {
        border-bottom: 1px solid darken($navbar-color, 10%);
      }
      &.active .dropdown ul {
        position: relative;
        top: 0;
        background: darken($navbar-color, 8%);
        min-height: 50px;
        max-height: 250px;
        height: auto;
        overflow: auto;
        @include box-shadow(none !important);
        li {
          min-height: 50px;
          border-bottom: darken($navbar-color, 5%);
          a {
            color: $white;
            border-bottom: 1px solid darken($navbar-color, 10%);
            &:hover {color: $body-link-color;}
          }
        }
      }
    }
  }
}

.navbar {
  // Mobile Only Navbar Styles
  @include respond(tablets) {
    > ul > li > .btn a {
      padding: 0 $small 0 $small !important;
    }
    ul > li .dropdown ul li.active .dropdown {
      left: -$min-device-width;
    }
  }
}

.navcontain {
  height: $navcontain-height;
  @include respond(portrait-tablets) {
    height: auto;
  }
}

// Pretty Navigation Styles

.pretty.navbar {
  @include background-image(linear-gradient(lighten($navbar-color, 20%),darken($navbar-color, 10%)));
  @include box-shadow(inset 0 1px 1px lighten($navbar-color, 20%),
          0 1px 2px rgba(0,0,0,0.80) !important); /* Remove this line if you dont want a dropshadow on your navigation*/

  // Pretty Nav Toggle Styles
  @include respond(all-phones) {
    a.toggle {
      border: 1px solid darken($navbar-color, 5%);
      @include background-image(linear-gradient(lighten($navbar-color, 20%), $navbar-color));
      @include box-shadow(inset 0 1px 2px lighten($navbar-color, 25%),
        inset 0 -1px 1px lighten($navbar-color, 5%),
        inset 1px 0 1px lighten($navbar-color, 5%),
        inset -1px 0 1px lighten($navbar-color, 5%),
        0 1px 1px lighten($navbar-color, 10%));
      i {
        @include text-shadow(0 1px 1px darken($navbar-color, 20%));
      }
      &:hover {
        @include background-image(linear-gradient(lighten($navbar-color, 25%), lighten($navbar-color, 5%)));
      }
      &:active, &.active {
        @include background-image(linear-gradient(darken($navbar-color, 5%), $navbar-color));
        @include box-shadow(0 1px 1px lighten($navbar-color, 10%));
      }
    }
  }
  &.row {
    @include border-radius($button-radius);
    @include respond(all-phones) {
      @include border-radius(0);
    }
  }
  ul li.field input.search {
    @include background-image(linear-gradient(darken($navbar-color, 20%), lighten($navbar-color, 2%)));
    border: none;
    @include box-shadow(0 1px 2px lighten($navbar-color, 25%) !important); /* Remove this line if you dont want a dropshadow on your navigation*/
  }
  > ul > li:first-child, .pretty.navbar > ul > li:first-child a:hover {
    @include box-shadow(none);
  }
}

// Dropdown menu styles

.navbar li .dropdown {
  width: auto;
  min-width: 0;
  max-width: $min-device-width;
  height: 0;
  position: absolute;
  background: lighten($default-color, 3%);
  overflow: hidden;
  z-index: 999;
  // Navigation Dropdown Mobile Specific Styles
  @include respond(all-phones) {
    .dropdown {
      width: 100%;
      max-width: 100%;
      position: relative;
      @include box-shadow(none !important);
    }
    &.active .dropdown {
      border-bottom: 1px solid darken($navbar-color, 10%);
    }
    &.active .dropdown ul {
      position: relative;
      top: 0;
      background: darken($navbar-color, 8%);
      min-height: 50px;
      max-height: 250px;
      height: auto;
      overflow: auto;
      @include box-shadow(none !important);
      li {
        min-height: 50px;
        border-bottom: darken($navbar-color, 5%);
        a {
          color: $white;
          border-bottom: 1px solid darken($navbar-color, 10%);
          &:hover {color: $body-link-color;}
        }
      }
    }
  }
}

.navbar li .dropdown ul {
  margin: 0;
  display: block;
  > li {
    position:relative;
    display: block;
    width: 100%;
    float: left;
    text-align: left;
    height: auto;
    @include border-radius(none);
    @include respond(tablets) {
      max-width: $min-device-width;
      word-wrap: break-word;
    }
    a {
      display: block;
      padding: 0 20px;
      color: $body-link-color;
      border-bottom: 1px solid $horizontal-rule-color;
      text-shadow: none;
      @include line-and-height(height-calc($large - 3));
      @include respond(all-phones) {
        padding: 0 $gutter-in-px;
      }
    }
    .dropdown {
      display: none;
      background: lighten($default-color, 10%);
    }
  }
  li:first-child a {
    @include border-radius(0);
  }
}

.gumby-no-touch .navbar ul li:hover > a,
.gumby-touch .navbar ul li.active > a {
  position: relative;
  background: $info-hover-color;
  z-index: 1000;
}

.gumby-no-touch .navbar ul li:hover .dropdown,
.gumby-touch .navbar ul li.active .dropdown {
  min-height: 50px;
  max-height: $tablet-device-width - 207;
  overflow: visible;
  height: auto;
  width: 100%;
  padding: 0;
  border-top: 1px solid darken($navbar-color, 5%);
  @include box-shadow(0px 3px 4px rgba(0,0,0,.3));
}

.gumby-no-touch .navbar ul li:hover .dropdown ul {
  position: relative;
  top: 0;
  min-height: 50px;
  max-height: 250px;
  height: auto;
  @include box-shadow(none !important);
  @include transition-duration(.5s);
  @include respond(all-phones) {
    overflow: auto;
    background: darken($navbar-color, 8%);
    li {
      border-bottom: darken($navbar-color, 5%);
      a {
        color: $white;
        border-bottom: 1px solid darken($navbar-color, 10%);
        &:hover {color: $body-link-color;}
      }
    }
  }
}

.gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown,
.gumby-touch .navbar li .dropdown ul > li.active .dropdown {
  border-top: none;
  display: block;
  position: absolute;
  z-index: 9999;
  left: 100%;
  top: $nav-distance;
  margin-top: 0;
  @include respond(all-phones) {
    position: relative;
    left: 0;
    ul {
      background: darken($navbar-color, 15%) !important;
    }
  }
}

.gumby-no-touch .navbar li .dropdown ul li a:hover {
  background: $default-color;
}

.gumby-touch .navbar a:hover {
  color: $navbar-link-color !important;
}

.subnav {
  display: block;
  width: auto;
  overflow: hidden;
  margin: 0 0 18px 0;
  padding-top: 4px;
  li, dt, dd {
    float: left;
    display: inline;
    margin-left: 9px;
    margin-bottom: 4px;
    &:first-child {
      margin-left: 0;
    }
  }
  dt {
    color: $default-color;
    font-weight: normal;
  }
  li a, dd a {
    color: $navbar-link-color;
    font-size: 15px;
    text-decoration: none;
    @include border-radius(4px);
  }
  li.active a, dd.active a {
    background: $navbar-color;
    padding: 5px 9px;
    text-shadow: 0 1px 1px $navbar-color;
  }
}