chill-bundles/Resources/public/scratch-css/stylesheets/sass/modules/_navigation.scss

.navigation {
  $navigation-padding: 1em;
  $navigation-background: $dark-gray;
  $navigation-color: transparentize(white, 0.3);
  $navigation-color-hover: white;
  $navigation-height: 60px;
  //$navigation-nav-button-background: $base-accent-color;
  //$navigation-nav-button-background-hover: lighten($navigation-background, 10);
  //$navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
  //$navigation-search-background: lighten($navigation-background, 5);
  //$navigation-search-border: 1px solid darken($navigation-background, 5);
  $navigation-active-link-color: transparentize(white, 0.5);
  $navigation-submenu-padding: 1em;
  $navigation-submenu-width: 12em;
  //$horizontal-bar-mode: $large-screen;

  background-color: $navigation-background;
  border-bottom: 1px solid darken($navigation-background, 10);
  height: $navigation-height;
  //width: 100%;
  z-index: 999;

  // Nav menu

  .nav {
    z-index: 9999999;
    //float: none;
  }

  ul#navigation-menu {    
    -webkit-transform-style: preserve-3d; // stop webkit flicker
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 9999;


    //@include media ($horizontal-bar-mode) {
      display: inline;
      margin: 0;
      padding: 0;
    //}
  }

  // The nav items

  ul li.nav-link {
    background: $navigation-background;
    display: block;
    line-height: $navigation-height;
    overflow: hidden;
    padding-right: .8em;
    text-align: right;
    width: 100%;
    z-index: 9999;

   // @include media ($horizontal-bar-mode) {
      background: transparent;
      display: inline;
      line-height: $navigation-height;
      text-decoration: none;
      width: auto;
   // }

    a {
      color: $navigation-color;
      display: inline-block;
      font-weight: 400;

      //@include media ($horizontal-bar-mode) {
        padding-right: 1em;
      //}

      &:hover {
        color: $navigation-color-hover;
      }
    }
  }

  .active-nav-item a {
    border-bottom: 1px solid $navigation-active-link-color;
    padding-bottom: 3px;
  }

  // Sub menus

  li.more.nav-link {
    padding-right: 0;

   // @include media($large-screen) {
      padding-right: $navigation-submenu-padding;
   // }

    > ul > li:first-child a  {
      padding-top: 1em;
    }

    a {
      margin-right: $navigation-submenu-padding;
    }

    > a {
      padding-right: 0.6em;
    }

    > a:after {
      @include position(absolute, auto -.4em auto auto);
      content: '\25BE';
      color: $navigation-color;
    }
  }

  li.more {
    overflow: visible;
    padding-right: 0;

    a {
      padding-right: .8em;
    }

    > a {
      padding-right: 1.6em;
      position: relative;

      //@include media($large-screen) {
        margin-right: $navigation-submenu-padding;
      //}

      &:after {
        content: '›';
        font-size: 1.2em;
        position: absolute;
        right: $navigation-submenu-padding / 2;
      }      
    }

    &:hover > .submenu {
      display: block;
    }

    //@include media($horizontal-bar-mode) {
      padding-right: .8em;
      position: relative;
    //}
  }

  ul.submenu {
    display: none;
    padding-left: 0;

    //@include media($horizontal-bar-mode) {
      left: -$navigation-submenu-padding;
      position: absolute;
      top: 1.5em;
    //}

    .submenu {
      //@include media($horizontal-bar-mode) {
        left: $navigation-submenu-width - .2em;
        top: 0;
      //}
    }

    li {
      display: block;
      padding-right: 0;

      //@include media($horizontal-bar-mode) {
        line-height: $navigation-height / 1.3;

        &:first-child > a {
          border-top-left-radius: $base-border-radius;
          border-top-right-radius: $base-border-radius;
        }

        &:last-child > a {
          border-bottom-left-radius: $base-border-radius;
          border-bottom-right-radius: $base-border-radius;
          padding-bottom: .7em;
        }
      //}

      a {
        background-color: darken($navigation-background, 3);
        display: inline-block;
        text-align: right;
        width: 100%;

        //@include media($horizontal-bar-mode) {
          background-color: $navigation-background;
          padding-left: $navigation-submenu-padding;
          text-align: left;
          //width: $navigation-submenu-width;
        //}
      }
    }
  }

  // Elements on the far right
   .navigation-search {
      padding: .85em .6em; 
      position: relative;

      input[type=search] {
         //background: $navigation-search-background;
         //border: $navigation-search-border;
         padding: .6em .55em;
         padding-right: 3.5em;
         width: calc(100% - 4.5em);
         //padding: .6em .8em;
         //padding: 0 30px 0 10px;
         font-size: .9em;
         font-style: italic;
         //color: $navigation-color;
         //border-radius: $base-border-radius * 2;
         margin: 0;
      }

      button {
         padding: 7px 12px;
         position: absolute;
         top: .9em;
         right: 1em;
      }
   }
}