Fix language dropdown CSS

exampleSite/config.yaml

@@ -43,7 +43,7 @@ params:
   description: Portfolio and personal blog of Jane Doe.
 
   # background image of the landing page
-  background: "/images/background.jpg"
+  background: "images/background.jpg"
 
   # Provide logos for your site. The inverted logo will be used in the initial
   # transparent navbar and the main logo will be used in the non-transparent navbar.
@@ -83,4 +83,4 @@ params:
     # give your some contact information. they will be used in the footer
     contactInfo:
       email: "janedoe@example.com"
-      phone: "+0123456789"
+      phone: "+0123456789"

layouts/partials/navigators/navbar.html

@@ -63,25 +63,22 @@
             <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
           </li>
         {{ end }}
-        <li class="nav-item">
+        {{ if .IsTranslated }}
-            {{ if .IsTranslated }}
+        <li class="nav-item dropdown">
-            <ul>
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <div class="dropdown nav-item languages-menu">
+            <img class="flag" src="https://www.countryflags.io/{{ cond (eq .Site.Language.Lang "en") "gb" .Language }}/flat/16.png">
-                <button class="btn-dark dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: rgba(255, 255, 255, 0); color: ;">
+            {{ .Site.Language.LanguageName }}
-                  {{ .Site.Language.LanguageName }}
+          </a>
-                </button>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            {{ range $.Site.Home.AllTranslations }}
-                  {{ range $.Site.Home.AllTranslations }}
+              <a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
-                    <a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
+                <img class="flag" src="https://www.countryflags.io/{{ cond (eq .Site.Language.Lang "en") "gb" .Language }}/flat/24.png">
-                      <img class="flag" src="https://www.countryflags.io/{{ cond (eq .Site.Language.Lang "en") "gb" .Language }}/flat/32.png">
+                {{ .Language.LanguageName }}
-                      {{ .Language.LanguageName }}
+              </a>
-                    </a>
-                  {{ end }}
-                </div>
-              </div>
-            </ul>
             {{ end }}
+          </div>
         </li>
+        {{ end }}
       </ul>
     </div>
   </div>

static/assets/css/navigators/navbar.css

@@ -116,6 +116,33 @@
   margin-left: -10px;
 }
 
+.top-navbar .dropdown-menu {
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  border: 1px solid #fff;
+  max-height: 100vh;
+  overflow-y: auto;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.top-navbar .dropdown-menu a {
+  color: #1c2d41;
+  border-bottom: none;
+}
+
+.top-navbar .dropdown-menu a:hover {
+  color: #2098d1;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  border-bottom: none;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(34, 136, 168, 0.2) 0%
+  );
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */
@@ -271,14 +298,3 @@
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
 }
-
-.languages-menu {
-   filter:alpha(opacity=50);   /* Internet Explorer 6     */
-   -moz-opacity:0.5;           /* Mozilla 1.6 et infér.   */
-   opacity: 0.5;               /* CSS3 et Mozilla récents */
-  padding-top: 6px;
-  border: 0;
-}
-
-.languages-item {
-}