improve new header in mobile mode

css/media-queries.css

@@ -81,22 +81,21 @@ Disroot Media Queries
       background: transparent !important;
       letter-spacing: 1.5px;
       width: auto;
-      position: fixed;
       top: 0;
       right: 0;
+      display: flex;
+      justify-content: right;
    }
    #nav-wrap > a {
       width: 48px;
 		  height: 48px;
-		  text-align: left;
 	    background-color: #50162D;
-		  position: relative;
+		  position: absolute;
       border: none;
       float: right;
       font: 0/0 a;
       text-shadow: none;
       color: transparent;
-      position: relative;
       top: 0px;
       right: 30px;
    }
@@ -123,7 +122,7 @@ Disroot Media Queries
       height: auto;
       display: none;
       clear: both;
-      width: auto;
+      width: 30%;
       float: right;
       position: relative;
       top: 12px;
@@ -137,6 +136,7 @@ Disroot Media Queries
       background: #1f2024;
       margin: 0 30px;
       clear: both;
+      float:right;
    }
 
    ul#nav li {
@@ -144,7 +144,6 @@ Disroot Media Queries
       height: auto;
       margin: 0 auto;
       padding: 0 4%;
-      text-align: left;
       border-bottom: 1px solid #2D2E34;
       border-bottom-style: dotted;
    }
@@ -156,6 +155,8 @@ Disroot Media Queries
       margin: 12px 0;
       line-height: 16px; /* reset line-height from 48px */
       border: none;
+      text-align: center;
+
    }
 
 
@@ -262,7 +263,7 @@ Disroot Media Queries
 
    /* mobile navigation
    ------------------------------------*/
-   #nav-wrap ul#nav { width: auto; float: none; }
+   #nav-wrap ul#nav { width: 80%; float: none; }
 
    /* header styles
    ------------------------------------*/

css/style.css

@@ -197,6 +197,10 @@ ul#nav li:nth-child(1) {
 /* hide toggle button */
 #nav-wrap > a.mobile-btn { display: none; }
 
+.mobile-btn {
+  z-index: 101;
+}
+
 ul#nav {
    min-height: 48px;
    width: auto;

templates/partials/navigation.html.twig

@@ -35,6 +35,9 @@
         {% endfor %}
         <li class="dropdown" id="icons">
         <a href="https://state.disroot.org"><i class="fa fa-heart" aria-hidden="true""></i></a>
+</li>
+        <li class="dropdown">
+
         <a href="https://apps.disroot.org"><i class="fa fa-plus-square" aria-hidden="true"></i></a>
         </li>
         <li>{% include 'partials/language-selector.html.twig' %}</li>