1 files changed, 36 insertions, 23 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 76bf71c666..69a2b07051 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -134,7 +134,6 @@ pre,
     font-weight: bold;
 }
 .keycode {
-    /*font-weight: bold;*/
     font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
 }
 .widget{
@@ -334,32 +333,43 @@ h6 {
     grid-area: header;
     position: sticky;
     top: 0px;
-    z-index: 100;
-}
-header {
     color: #fff;
-    height: 64px;
-    padding: 8px 8px 8px 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
 }
-.logo-container {
+.dropdowns {
+    /* allow for scrolling */
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* make it smooth on iOS */
+    -webkit-overflow-scrolling: touch;
+    grid-area: dropdowns;
     display: flex;
     justify-content: space-between;
+    flex-direction: column;
 }
-.logo {
+symbol, .logo {
     color: #fff;
     text-decoration: none;
-    display: flex;
+}
+.logo:hover {
+    text-decoration: none;
+    color: #fff;
 }
 .logo p {
     font-size: 24px;
 }
-.logo .symbol {
+.symbol {
+    grid-area: symbol;
+    padding: 8px 8px 8px 20px;
+}
+.symbol div {
     background-image: url(media/navigation/libo-symbol-white.svg);
     background-repeat: no-repeat;
     background-size: contain;
     width: 52px;
     height: 60px;
-    margin-right: 10px;
 }
 
 [data-a11y-toggle]:not([aria-controls]){
@@ -740,6 +750,11 @@ li.disabled a {
     }
 }
 @media screen and (min-width: 960px) {
+    .dropdowns {
+        flex-direction: row;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
     #langs-nav, #modules-nav {
         display: none;
     }
@@ -752,13 +767,11 @@ li.disabled a {
         cursor: pointer;
         color: #fff;
         font-size: 19px;
-        position: relative;
-        top: 40px;
         display: block;
         background: transparent;
         border: none;
         text-transform: none;
-        padding:0;
+        padding: 0;
         line-height: normal;
     }
 
@@ -766,12 +779,11 @@ li.disabled a {
     #langs-nav:not([aria-hidden='true']), #modules-nav:not([aria-hidden='true']) {
         display: flex;
         flex-direction: column;
-        max-width: 120px;
         overflow-y: auto;
         overflow-x: hidden;
+        max-width: 120px;
         max-height: 480px;
         position: absolute;
-        top: 80px;
     }
     #modules-nav {
         background-color: #101820;
@@ -803,16 +815,9 @@ li.disabled a {
         grid-area: footer;
     }
     .lang {
-        position: absolute;
-        top: 0;
-        left: 200px;
         background-color: transparent;
     }
     .modules {
-        width: 120px;
-        position: absolute;
-        top: 0;
-        left: 80px;
         border: none;
         background-color: transparent;
     }
@@ -856,6 +861,14 @@ li.disabled a {
 /* Use @supports to sneak these rules past IE */
 @supports (grid-area: auto) {
     @media screen and (min-width: 960px) {
+        #TopLeftHeader {
+            display: grid;
+            align-items: end;
+            grid-template-columns: auto auto;
+            grid-template-rows: auto auto;
+            grid-template-areas: "symbol logo"
+                                "symbol dropdowns"
+        }
         #SearchFrame {
             grid-area: search;
             display: flex;