diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index f984b2626..e8484e498 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -572,8 +572,8 @@ body > header,
   display: flex;
 
   @include breakpoint(small only) {
+    flex-direction: row-reverse;
     flex-wrap: wrap;
-    justify-content: space-between;
 
     .responsive-menu {
       width: 100%;
@@ -582,15 +582,14 @@ body > header,
         display: inline-block;
       }
     }
-  }
 
-  @include breakpoint(medium) {
-    h1 {
-      flex-grow: 1;
+    [data-responsive-toggle] {
+      flex-grow: 1000;
     }
   }
 
   h1 {
+    flex-grow: 1;
     margin-bottom: 0;
 
     a img {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 1eec0d01d..24c200df7 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -11,6 +11,12 @@
   </div>
 
   <div class="top-bar">
+    <h1>
+      <%= link_to root_path, accesskey: "0" do %>
+        <%= image_tag(image_path_for("logo_header.png"), alt: setting["org_name"]) %>
+      <% end %>
+    </h1>
+
     <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
       <button type="button" class="menu-button" data-toggle>
         <span class="menu-icon"></span>
@@ -18,12 +24,6 @@
       </button>
     </span>
 
-    <h1>
-      <%= link_to root_path, accesskey: "0" do %>
-        <%= image_tag(image_path_for("logo_header.png"), alt: setting["org_name"]) %>
-      <% end %>
-    </h1>
-
     <div id="responsive-menu" class="responsive-menu">
       <%= render Layout::AccountMenuComponent.new(current_user) %>