# HG changeset patch
# User Dennis Fink <dennis.fink@c3l.lu>
# Date 2022-05-11 11:37:47
# Node ID eac8ab19899c2e897ec9303bd99f6ff9be71e09a
# Parent  2bb3e5d66aab6bb83d8c0bdc4e98f2bb5bc3ccfa

Use flex for the menu

diff --git a/c3l_membership/static/style.css b/c3l_membership/static/style.css
--- a/c3l_membership/static/style.css
+++ b/c3l_membership/static/style.css
@@ -51,3 +51,9 @@ legend {
 h4 {
   margin-bottom: 0.5em;
 }
+
+.menu {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5em;
+}
diff --git a/c3l_membership/templates/index.html b/c3l_membership/templates/index.html
--- a/c3l_membership/templates/index.html
+++ b/c3l_membership/templates/index.html
@@ -14,21 +14,19 @@
     <div class="pure-g">
       <div class="pure-u-md-1-3"></div>
       <div class="pure-u-1-1 pure-u-md-1-3">
-        <div class="pure-menu pure-menu-horizontal">
-          <ul class="pure-menu-list">
-            <li class="pure-menu-item">
-              <a href="{{ url_for("root.index", lang_code="en") }}" class="pure-menu-link"><span class="fi fi-gb"></span> English</a>
-            </li>
-            <li class="pure-menu-item">
-              <a href="{{ url_for("root.index", lang_code="lb") }}" class="pure-menu-link"><span class="fi fi-lu"></span> Lëtzebuergesch</a>
-            </li>
-            <li class="pure-menu-item">
-              <a href="{{ url_for("root.index", lang_code="de") }}" class="pure-menu-link"><span class="fi fi-de"></span> Deutsch</a>
-            </li>
-            <li class="pure-menu-item">
-              <a href="{{ url_for("root.index", lang_code="fr") }}" class="pure-menu-link"><span class="fi fi-fr"></span> Français</a>
-            </li>
-          </ul>
+        <div class="menu">
+          <div>
+            <a href="{{ url_for("root.index", lang_code="en") }}" class="pure-menu-link"><span class="fi fi-gb"></span> English</a>
+          </div>
+          <div>
+            <a href="{{ url_for("root.index", lang_code="lb") }}" class="pure-menu-link"><span class="fi fi-lu"></span> Lëtzebuergesch</a>
+          </div>
+          <div>
+            <a href="{{ url_for("root.index", lang_code="de") }}" class="pure-menu-link"><span class="fi fi-de"></span> Deutsch</a>
+          </div>
+          <div>
+            <a href="{{ url_for("root.index", lang_code="fr") }}" class="pure-menu-link"><span class="fi fi-fr"></span> Français</a>
+          </div>
         </div>
       </div>
       <div class="pure-u-md-1-3"></div>