Init

themes/agico-hugo/assets/scss/templates/_navigation.scss

@@ -0,0 +1,214 @@
+.navigation {
+  transition: none;
+
+  background: $bg-gradient-secondary;
+
+  @include desktop {
+    background: $bg-gradient-secondary;
+    padding: 15px 0;
+  }
+
+  &.nav-bg {
+    background: $bg-gradient-secondary;
+    padding: 15px 0;
+  }
+
+  &.navigation-white {
+    &.nav-bg {
+      background: $white;
+      box-shadow: 0px 10px 20px 0px rgba(0, 141, 236, 0.1);
+
+      .btn {
+        color: $color-primary !important;
+
+        &:hover {
+          color: $white !important;
+        }
+      }
+    }
+
+    @include desktop {
+      background: $white;
+
+      .btn {
+        color: $color-primary !important;
+
+        &:hover {
+          color: $white !important;
+        }
+      }
+    }
+
+    .dropdown {
+      &-menu {
+        background: $white;
+      }
+
+      &-item {
+        color: $text-dark;
+      }
+    }
+  }
+}
+
+.navbar {
+  .navbar-toggler {
+    &[aria-expanded="true"] {
+      .fa-times {
+        display: block;
+      }
+
+      .fa-bars {
+        display: none;
+      }
+    }
+
+    .fa-times,
+    .fa-bars {
+      color: $white !important;
+      font-size: 25px;
+    }
+
+    .fa-times {
+      display: none;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .nav-item {
+
+    .nav-link {
+      font-size: 16px;
+      font-weight: 500;
+      padding: 20px 22px;
+      //font-family: $font-primary;
+      transition: all ease 0.3s;
+
+      @include desktop-lg {
+        padding: 20px 15px;
+      }
+
+      @include desktop {
+        padding: 10px 0;
+      }
+
+      &.active {
+        color: $white;
+      }
+
+      &:hover {
+        color: $white !important;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .dropdown {
+    &:hover {
+      .dropdown-menu {
+        opacity: 1;
+        visibility: visible;
+        transform: scaleX(1);
+      }
+    }
+
+    &-menu {
+      border: 0;
+      top: 50px;
+      opacity: 0;
+      left: -20px;
+      padding: 15px;
+      display: block;
+      border-radius: 0;
+      visibility: hidden;
+      border-radius: 10px;
+      transition: .3s ease;
+      margin: 0px;
+      transform: scale(.8);
+      background: $bg-gradient-secondary;
+      box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
+      border: 1px solid white;
+
+      @include desktop {
+        display: none;
+        opacity: 1;
+        visibility: visible;
+        transform: scale(1);
+        transform-origin: unset;
+      }
+
+      &.show {
+        visibility: hidden;
+
+        @include desktop {
+          visibility: visible;
+          display: block;
+        }
+      }
+    }
+
+    &-item {
+      position: relative;
+      color: $white;
+      transition: .2s ease;
+      //font-family: $font-primary;
+
+      @include desktop {
+        text-align: left;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
+
+      &:hover {
+        color: $white !important;
+        text-decoration: underline;
+        background: transparent;
+      }
+    }
+  }
+}
+
+#langDropdown {
+  background: transparent;
+  border: none;
+  color: $white;
+  font-size: 16px;
+  border-radius: 50px;
+  appearance: none;
+  padding: 12px;
+  width: auto !important;
+  min-width: 0 !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  option {
+    color: black;
+    min-width: 0;
+  }
+  &:hover {
+    color:$white !important;
+  }
+}
+
+.dropdown-menu-lang {
+  min-width: 0 !important;
+  width: auto;
+  white-space: nowrap;
+  padding: 4px;
+  background: $white !important;
+  appearance: none;
+  --bs-dropdown-min-width: 0;
+  --bs-dropdown-link-active-bg: #79ACBF;   /* background of selected item */
+  --bs-dropdown-link-active-color: #fff;   /* text color of selected item */
+}
+
+.navbar .dropdown > .dropdown-menu.dropdown-menu-lang {
+  width: max-content !important;
+  min-width: 0 !important;
+}