chill-bundles/Resources/public/sass/modules/_navigation.scss

.navigation {
   //$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);
   //$horizontal-bar-mode: $large-screen;

   background-color: $navigation-background;
   border-bottom: $navigation-border-bottom;
   height: $navigation-height;
   //width: 100%;
   z-index: 999;

   .logo-container {
      height: $navigation-height;

      &:before {    /* create a full-height inline block pseudo=element */
         content: ' ';
         display: inline-block;
         vertical-align: middle;  /* vertical alignment of the inline element */
         height: 100%;
      }

      img.logo {
         max-width: 89%;
         max-height: $navigation-height - 10px;
         display: inline-block;
         vertical-align: middle;
      }
   }

   // Nav menu
   .nav {
      z-index: 9999999;
      height: $navigation-height;
      //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-block;
      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: $navigation-first-padding-top;
      }

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

      > a {
         padding-right: 0.6em;
      }

      > a:after {
         @include position(absolute, auto -.4em auto auto);
         content: $navigation-more-pin;
         color: $navigation-more-pin-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: $navigation-ul-submenu-padding-left;
      //@include media($horizontal-bar-mode) {
      left: -$navigation-submenu-padding;
      position: absolute;
      top: $navigation-ul-submenu-top;
      //}

      .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: $navigation-border-radius;
            border-top-right-radius: $navigation-border-radius;
         }

         &:last-child > a {
            border-bottom-left-radius: $navigation-border-radius;
            border-bottom-right-radius: $navigation-border-radius;
            padding-bottom: $navigation-last-padding-bottom;
         }
      //}

         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: $navigation-search-padding;
      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;
         //color: $navigation-color;
         //border-radius: $navigation-border-radius * 2;
         margin: 0;
      }

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

   ul li.nav-link2 {
         position: relative;
         padding-right: 2em;
         text-align: left;
         line-height: $navigation-height;
         z-index: 9999;
         float: left;
         list-style: none;

         & div.li-content {
            display: inline-block;
            line-height: normal;
            vertical-align: middle;

            a.more:after {
               content: $navigation-more-pin;
               color: $navigation-more-pin-color;
               padding-left: 0.4em;
               font-size: 1.2em;
            }
         }

          ul {
            display: none;
            position: absolute;
            line-height: normal;
            list-style: none;
            background-color: #333;
            padding-right: 1.5em;
            padding-left: 1.5em;
            width: 100%;
         }

         ul {
            li {
               padding-top:0.7em;
               padding-bottom:0.7em;

               &:first-child {
                  padding-top: $navigation-first-padding-top;
               }

               &:last-child {
                  padding-bottom: $navigation-first-padding-top;
               }
            }
         }

      &:hover ul {
         display: block;
      }

      a {
         width: 100%;
         color: $navigation-color;
         font-weight: 400;
         
         &:hover {
            color: $navigation-color-hover;
         }
      }
   }
}

@import "../custom/modules/navigation";