diff --git a/app/assets/images/logo_header.png b/app/assets/images/logo_header.png
index c178ec781..84478da83 100644
Binary files a/app/assets/images/logo_header.png and b/app/assets/images/logo_header.png differ
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 1ad457b87..2c09ecb84 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/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 {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 8b4c0a171..8fe3644aa 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -10,60 +10,41 @@
   </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">
-          <%= 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 %>
-        </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>
+      <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', alt: t("layouts.header.logo")) %>
+        <% end %>
       </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 id="responsive-menu">
+        <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="show-for-small-only">
-        <div class="subnavigation row">
-          <%= render "shared/subnavigation" %>
-          <div class="small-12 column">
-            <%= render "shared/top_links" %>
+          <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>
         </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" %>