Updates top bar html and styles

app/assets/stylesheets/layout.scss

@@ -436,8 +436,6 @@ header {
 .top-bar {
   background: $brand !important;
   color: #fff;
-  height: $line-height * 2;
-  line-height: $line-height * 2;
   padding-bottom: 0;
   padding-top: 0;
 
@@ -445,30 +443,44 @@ header {
     padding: 0;
   }
 
-  .top-bar-title a {
-    @include logo;
-    line-height: rem-calc(80);
-
-    @include breakpoint(medium) {
-      line-height: rem-calc(80);
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
   ul {
     background: none;
     padding-right: rem-calc(15);
   }
 
+  .menu .menu-text {
+    padding: 0;
+
+    a {
+      color: #fff;
+      display: inline-block;
+      font-family: 'Lato' !important;
+      font-size: rem-calc(24);
+      font-weight: lighter;
+      line-height: $line-height * 2;
+      padding: 0;
+
+      @include breakpoint(medium) {
+        line-height: rem-calc(80);
+        margin-top: 0;
+      }
+
+      img {
+
+        @include breakpoint(medium) {
+          margin-right: $line-height / 2;
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
   .menu > li {
     display: block;
+    width: 100%;
 
     @include breakpoint(medium) {
-      display: table-cell;
-      height: $line-height * 3.5;
+      width: auto;
     }
 
     a {
@@ -492,13 +504,11 @@ header {
     }
   }
 
-  .menu-icon.dark {
-    height: 20px;
+  .has-submenu {
 
-    &::after,
-    &:hover::after {
-      background: #fff;
-      box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
+    &.is-active a {
+      color: #fff;
+      font-weight: bold;
     }
   }
 
@@ -507,7 +517,7 @@ header {
     &.is-dropdown-submenu {
       background: #fff;
       margin: 0;
-      margin-top: rem-calc(-24);
+      margin-top: rem-calc(-12);
       padding: 0;
       z-index: 9;
     }
@@ -524,6 +534,11 @@ header {
   }
 }
 
+.title-bar {
+  background: none;
+  float: right;
+}
+
 .dropdown.menu > li {
 
   &.is-dropdown-submenu-parent > a::after {

app/views/layouts/_header.html.erb

@@ -10,37 +10,53 @@
   </div>
 
   <div class="row">
+    <div class="title-bar" data-responsive-toggle="responsive_menu" data-hide-for="medium">
+      <button class="menu-icon" type="button" data-toggle="responsive_menu"></button>
+      <div class="title-bar-title"><%= t("application.menu")%></div>
+    </div>
+
     <div class="top-bar">
-
-      <%= link_to setting['org_name'], root_path, class: "logo show-for-small-only" %>
-
-      <span data-responsive-toggle="responsive_menu" data-hide-for="medium" class="float-right">
-        <span class="menu-icon dark" data-toggle></span>
-        <%= t("application.menu")%>
-      </span>
-
-      <div id="responsive_menu">
-        <div class="top-bar-title">
-          <%= link_to root_path, class: "hide-for-small-only", accesskey: "0" do %>
-            <%= image_tag(image_path_for('logo_header.png'), class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
-            <%= setting['org_name'] %>
+      <ul class="menu show-for-small-only">
+        <li class="menu-text">
+          <%= link_to root_path, accesskey: "0" do %>
+            <%= image_tag(image_path_for("logo_header.png"),
+                          class: "float-left",
+                          size: "48x48",
+                          alt: t("layouts.header.logo")) %>
+            <%= setting["org_name"] %>
           <% end %>
-        </div>
+        </li>
+      </ul>
+    </div>
 
-        <div class="top-bar-right">
-          <ul class="menu" data-responsive-menu="medium-dropdown">
-            <%= render "shared/admin_login_items" %>
-            <%= render "layouts/notification_item" %>
-            <%= render "devise/menu/login_items" %>
-          </ul>
+    <div class="top-bar" id="responsive_menu">
+      <div class="top-bar-left">
+        <ul class="menu">
+          <li class="menu-text">
+            <%= link_to root_path, class: "hide-for-small-only", accesskey: "0" do %>
+              <%= image_tag(image_path_for("logo_header.png"),
+                            class: "hide-for-small-only float-left",
+                            size: "80x80",
+                            alt: t("layouts.header.logo")) %>
+              <%= setting["org_name"] %>
+            <% end %>
+          </li>
+        </ul>
+      </div>
 
-          <div class="show-for-small-only">
-            <div class="subnavigation row">
-              <%= render "shared/subnavigation" %>
-              <div class="small-12 column">
-                <%= render "shared/top_links" %>
-              </div>
-            </div>
+      <div class="top-bar-right">
+        <ul class="dropdown menu" data-dropdown-menu>
+          <%= render "shared/admin_login_items" %>
+          <%= render "layouts/notification_item" %>
+          <%= render "devise/menu/login_items" %>
+        </ul>
+      </div>
+
+      <div class="show-for-small-only">
+        <div class="subnavigation row">
+          <%= render "shared/subnavigation" %>
+          <div class="small-12 column">
+            <%= render "shared/top_links" %>
           </div>
         </div>
       </div>

app/views/shared/_admin_login_items.html.erb

@@ -1,7 +1,7 @@
 <% if show_admin_menu? %>
-  <li>
+  <li class="has-submenu">
     <%= link_to t("layouts.header.administration_menu"), "#", rel: "nofollow", class: "hide-for-small-only" %>
-    <ul class="menu">
+    <ul class="submenu menu vertical" data-submenu>
       <% if current_user.administrator? %>
         <li>
           <%= link_to t("layouts.header.administration"), admin_root_path %>