new header

css/style.css

@@ -156,14 +156,13 @@ header .scrolldown a:hover { color: #50162D; }
 
 /* primary navigation
 ------------------------------------*/
-
 #nav-logo {
-    display: inline-block;
-    float: left;
-    height: 45px;
-    width: 95px;
-    background: url("../images/d-white.png") no-repeat right center;
-    background-size: 30px 30px;
+position:relative;
+top:9px;
+}
+
+ul#nav li:nth-child(1) {
+  margin-right: 30px;
 }
 
 #nav-wrap ul {
@@ -177,7 +176,6 @@ header .scrolldown a:hover { color: #50162D; }
 	 outline: none;
 }
 
-
 /* nav-wrap */
 #nav-wrap {
    background-color: #50162D;
@@ -189,7 +187,10 @@ header .scrolldown a:hover { color: #50162D; }
    z-index: 100;
    position: fixed;
    left: 0;
-   top: 0;
+   top: -20px;
+   display: flex;
+   align-items: center;
+   justify-content: center
 }
 .opaque { background-color: #50162D; }
 
@@ -202,7 +203,7 @@ ul#nav {
 
    /* center align the menu */
    text-align: right;
-   padding-right: 10%;
+   padding-right: 2%;
 }
 ul#nav li {
    position: relative;
@@ -210,6 +211,12 @@ ul#nav li {
    list-style: none;
    height: 48px;
 }
+
+/* separate top right icons from the rest of the menu */
+li#icons {
+   margin-left: 40px;
+}
+
 ul#nav li ul{
     position: absolute;
     list-style: none;
@@ -398,6 +405,7 @@ ul#nav li a:hover .ul#nav li ul {
     margin-bottom: 30px;
     position: relative;
     z-index: 9;
+
 }
 
 .fullbar-content{

templates/partials/navigation.html.twig

@@ -15,16 +15,16 @@
 
 
 <nav id="nav-wrap">
-    <div><a id="nav-logo" href="{{ base_url == '' ? '/#home' : base_url }}"></a></div>
-
     <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
     <a class="mobile-btn" href="#close" title="Hide navigation">Hide navigation</a>
 
     {% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
     {% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
 
-    {% include 'partials/language-selector.html.twig' %}
     <ul id="nav">
+    <li class="dropdown" id="nav-logo">
+    <a href="https://disroot.org"><img src="../../images/d-white.png" width="30px"></a>
+    </li>
         {% for page in pages.children %}
             {% if page.visible %}
                 {% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
@@ -33,5 +33,10 @@
                 {% endif %}
             {% endif %}
         {% endfor %}
+        <li class="dropdown" id="icons">
+        <a href="https://state.disroot.org"><i class="fa fa-heart" aria-hidden="true""></i></a>
+        <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>
       </ul>
 </nav>