minor #144 Make the main menu scroll on smaller devices (Pierstoval, …

…javiereguiluz, ogizanagi) This PR was merged into the master branch. Discussion ---------- Make the main menu scroll on smaller devices This PR is the result of a combined effort from @Pierstoval and @ogizanagi to solve the problem of scrolling the main menu on smaller devices without using JavaScript. Thanks to both for their work :) Commits ------- 80abfa3 minor #143 Remove unnecessary fixed positioning of #header-security & only show scrollbar on hover (ogizanagi) 5ad9db8 Remove unnecessary fixed positioning of #header-security & only show scrollbar on hover 1646ab8 minor #142 Made the main menu scroll on smaller devices without js (ogizanagi) cfdf080 Made the main menu scroll on smaller devices without js 2aaffab Made the main menu scroll on smaller devices 9d24202 Fix layout issues when many items
EasyCorp · Feb 25, 2015 · 498b363 · 498b363
2 parents c219606 + 80abfa3
commit 498b363
Showing 1 changed file with 11 additions and 12 deletions.
diff --git a/Resources/public/stylesheet/admin.css b/Resources/public/stylesheet/admin.css
@@ -859,8 +859,8 @@ body.error code {
         padding-right: 25px;
         padding-top: 0;
         margin-bottom: 0;
-        overflow: visible;
-        min-height: 100%;
+        overflow: hidden;
+        height: 100%;
         top: 0;
         bottom: 0;
         position: fixed;
@@ -869,6 +869,8 @@ body.error code {
     #header-contents {
         margin-right: -25px;
         min-height: 100%;
+        display: flex;
+        flex-direction: column;
     }
     #header-logo {
         background: #242123;
@@ -890,20 +892,21 @@ body.error code {
         background: #D47843;
     }
     #header #header-nav {
-        margin-left: 0;
-        margin-right: 0;
-        padding-right: 0;
-        padding: 0;
+        flex: 1;
+        height: 0;
         margin: 0;
-        width: 100%;
+        overflow: hidden;
+        padding: 0 0 1em;
+    }
+    #header #header-nav:hover {
+        overflow-y: auto;
     }
     #header #header-menu {
         display: block;
         height: auto;
         margin-left: 0;
         margin-right: 0;
         margin-top: 0;
-        max-height: 100%;
         padding: 0;
         list-style: none;
         width: 100%;
@@ -940,14 +943,10 @@ body.error code {
     }
     #header #header-security {
         border-top: 1px solid #483D43;
-        bottom: 0;
         color: #D5D2CA;
         font-size: 14px;
-        margin-top: 1em;
         padding-bottom: 1em;
         padding-top: 1em;
-        position: absolute;
-        width: 100%;
     }
     #header #header-security p {
         line-height: 1.5;