Switch to flex header container

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1f5d0398e97b2b11433355821a69f11e4ee6c215..883f80c6c28c1ef746e88b6bb56c29c4b14c2649 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -109,7 +109,9 @@ time[title] {
 
 #menu-icon {
   display: none;
-  float: right;
+  position: absolute;
+  top: 0;
+  right: 0;
   background: image-url("menu-icon.png") no-repeat;
   background-size: 30px 30px;
   width: 30px;
@@ -133,10 +135,6 @@ header {
     padding: $lineheight * 0.5;
   }
 
-  h1, nav.primary {
-    float: left;
-  }
-
   img.logo {
     margin-top: -2px;
   }
@@ -150,8 +148,11 @@ header {
   .btn {
     font-size: 14px;
   }
-}
 
+  nav.primary {
+    margin-right: auto;
+  }
+}
 
 nav.primary {
   & > .btn-group .btn-outline-primary {
@@ -186,9 +187,6 @@ nav.primary {
 }
 
 nav.secondary {
-  position: absolute;
-  right: 0;
-
   .nav-link {
     padding: 0.2rem;
     color: $darkgrey;
@@ -230,15 +228,8 @@ body.small-nav {
     display: block;
   }
 
-  nav.primary,
-  nav.secondary {
-    float: none !important;
-    position: relative;
-    display: block;
-    clear: both;
-  }
-
   header {
+    flex-direction: column;
     height: auto;
     min-height: $headerHeight;
     background: #fff;
@@ -259,6 +250,7 @@ body.small-nav {
   }
 
   nav.primary {
+    margin-right: 0;
     padding: 0;
 
     ul, li {

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index fb5c018392364bb4e5f945c4d7d6f36c2de5afcb..e272834be5fa6ecb1ac4a559262c17e6018d4ca0 100644 (file)
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,4 +1,4 @@
-<header class="closed clearfix">
+<header class="d-flex closed">
   <h1 class="m-0 fw-semibold">
     <a href="<%= root_path %>" class="text-black text-decoration-none geolink">
       <%= image_tag "osm_logo.png", :srcset => image_path("osm_logo.svg"), :alt => t("layouts.logo.alt_text"), :width => 30, :height => 30, :class => "logo" %>
@@ -80,7 +80,7 @@
       </li>
     </ul>
     <% if current_user && current_user.id %>
-      <div class='d-inline-flex dropdown user-menu logged-in clearfix'>
+      <div class='d-inline-flex dropdown user-menu logged-in'>
         <button class='dropdown-toggle btn btn-outline-secondary border-grey bg-white text-secondary px-2 py-1 flex-grow-1' type='button' data-bs-toggle='dropdown'>
           <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1") %>
           <%= render :partial => "layouts/inbox" %>