New navbar and langbar style

assets/css/bobastyle.css

@@ -119,16 +119,40 @@ footer {
 
 /* Navbar formatting */
 .navbar, .langbar {
-  margin: 5px 0px;
+  display: flex;
-}
+  flex-wrap: nowrap;
-
+  flex-direction: row;
-(.navbar, .langbar) h2 {
+  background-color: #222;
-  color: inherit;
+  border-radius: 8px;
-  text-decoration: inherit;
+  margin-top: 5px;
+  align-items: flex-start;
 }
 
 .navbar-item, .langbar-item {
-  margin-right: 5px;
+  /*flex-grow: 1;*/
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+/*.navbar-item:first-child,
+.langbar-item:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.navbar-item:last-child,
+.langbar-item:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}*/
+
+.navbar-item:hover, .langbar-item:hover {
+  background-color: #444;
+  text-decoration: none;
+}
+
+.langbar-item.selected {
+  font-weight: bold;
 }
 
 

layouts/partials/top.html

@@ -17,7 +17,7 @@
     {{ range .Site.Home.AllTranslations }}
 
     {{ if eq .Language $.Site.Language }}
-    <b><a class="langbar-item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></b>
+    <a class="langbar-item selected" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
     {{ else }}
     <a class="langbar-item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
     {{ end }}