Updates header markup and includes new logo

app/assets/stylesheets/layout.scss

@@ -542,6 +542,20 @@ header {
       }
     }
   }
+
+  .top-bar-title {
+    line-height: $line-height;
+
+    a img {
+      height: rem-calc(48);
+      margin: 0;
+      width: auto;
+
+      @include breakpoint(medium up) {
+        height: auto;
+      }
+    }
+  }
 }
 
 .menu-icon {

app/views/layouts/_header.html.erb

@@ -10,47 +10,26 @@
   </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">
-      <ul class="menu show-for-small-only">
-        <li class="menu-text">
+
+      <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 class="top-bar-title">
         <%= 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"] %>
+          <%= image_tag(image_path_for('logo_header.png'), class: 'float-left', alt: t("layouts.header.logo")) %>
         <% end %>
-        </li>
-      </ul>
-    </div>
-
-    <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 id="responsive-menu">
         <div class="top-bar-right">
-        <ul class="dropdown menu" data-dropdown-menu>
+          <ul class="menu" data-responsive-menu="medium-dropdown">
             <%= 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">
@@ -62,8 +41,10 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 
-  <div class="subnavigation expanded">
+  <div id="navigation_bar" class="subnavigation expanded">
     <div class="row">
       <div class="hide-for-small-only">
         <%= render "shared/subnavigation" %>