made mobile work

Author: Felix Hennig

src/css/base.css

@@ -125,3 +125,12 @@ body ::-webkit-scrollbar-thumb {
   max-width: 1280px;
   margin: 0 auto;
 }
+
+.container2 {
+  display: flex;
+  margin: 0 0;
+}
+
+.space-between {
+  justify-content: space-between;
+}

src/css/header.css

@@ -283,7 +283,7 @@ body {
     transition: max-height 0.2s ease, padding 0.2s ease;
   }
 
-  .navbar-sub .container {
+  .navbar-sub .container2 {
     flex-direction: column;
   }
 

src/partials/header-content.hbs

@@ -23,33 +23,37 @@
       </div>
     </nav>
     <nav id="navbar-sub" class="navbar-sub">
-      <div class="container">
-        {{#> navbar }}
-          navbar.hbs partial not found - you're seeing failover content
-          <a class="navbar-sub-item" href="#">Home</a>
-          <div class="navbar-sub-item drop-down">
-              Operators
-              <div class="drop-down-content">
-                  <a class="drop-down-item" href="#">Operator 1</a>
-                  <a class="drop-down-item" href="#">Operator 2</a>
-              </div>
-          </div>
-        {{/navbar}}
-        {{#with @root.page.versions}}
-        <div class="page-versions">
-          <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
-          <div class="version-menu">
-            {{#each this}}
-            <a class="version
-              {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
-              {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
-            {{/each}}
+      <div class="container space-between">
+        <div class="container2">
+          {{#> navbar }}
+            navbar.hbs partial not found - you're seeing failover content
+            <a class="navbar-sub-item" href="#">Home</a>
+            <div class="navbar-sub-item drop-down">
+                Operators
+                <div class="drop-down-content">
+                    <a class="drop-down-item" href="#">Operator 1</a>
+                    <a class="drop-down-item" href="#">Operator 2</a>
+                </div>
+            </div>
+          {{/navbar}}
+          <a class="arrow" href="javascript:document.querySelector('.navbar-sub').classList.toggle('open')">
+            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
+          </a>
+        </div>
+        <div class="container2">
+          {{#with @root.page.versions}}
+          <div class="page-versions">
+            <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
+            <div class="version-menu">
+              {{#each this}}
+              <a class="version
+                {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
+                {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+              {{/each}}
+            </div>
           </div>
+          {{/with}}
         </div>
-        {{/with}}
-        <a class="arrow" href="javascript:document.querySelector('.navbar-sub').classList.toggle('open')">
-          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
-        </a>
       </div>
     </nav>
   </header>