Adapt menu for responsive

1 files changed, 56 insertions, 21 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 1a1bcf9..ce9e762 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -97,6 +97,7 @@ caption{
     color:#444;
 }
 
+.nav.navbar-nav > li > a,
 .action a,
 .pager li a, .nav-pills > li.active > a,
 .pager li a:hover, .nav-pills > li.active > a:hover,
@@ -390,11 +391,11 @@ a[disabled] {
     font-family: 'Yanone Kaffeesatz Light', sans-serif;
     height: 35px;
     z-index: 10;
-    position: absolute;
-    width: 100%;
     padding:0;
     background-color: #fff;
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+    text-transform: uppercase;
+    padding: 3px;
 }
 
 #topbar img{
@@ -402,22 +403,24 @@ a[disabled] {
     vertical-align: top;
 }
 
-#top-menu-first{
-    position: absolute;
-    width: 300px;
-    font-size: 1.4em;
-    padding: 0.15em 0.4em;
-    text-transform: uppercase;
+#topbar .nav.navbar-nav > li > a {
+    padding-top: 0;
+    padding-bottom: 0;
 }
 
-#top-menu{
-    text-transform: uppercase;
-    padding: 3px;
-    padding-left: 300px;
+
+#topbar #top-menu-first.action{
+    padding-right: 5px;
 }
 
-#top-menu .action{
+#topbar .action{
     font-size: 1.4em;
+    padding-left: 5px;
+    padding-right: 90px;
+}
+
+#topbar .container-fluid{
+    padding: 0;
 }
 
 #content{
@@ -1317,6 +1320,7 @@ table.inline-table td input[type=file]{
     border: 0px solid transparent;
     display: block;
     margin: 0;
+    width: 500px;
 }
 
 #search-result,
@@ -3915,12 +3919,12 @@ li.main_category li.subcategory > span > label{
 
 #switch-menu{
     display: none;
-    position: fixed;
+    position: absolute;
     text-align: center;
     text-transform: uppercase;
     font-size: 1.6em;
     padding: 0;
-    top: 78px;
+    top: 18px;
     z-index: 200;
     right: 0;
     left: 0;
@@ -3991,6 +3995,15 @@ li.main_category li.subcategory > span > label{
     }
 }
 
+@media (max-width: 1552px) {
+    #topbar .action{
+        padding-right: 20px;
+    }
+    #search-box{
+        width: 350px;
+    }
+}
+
 @media (min-width: 1200px) {
     #simple_button-lnk .lbl{
         display:inline;
@@ -4014,6 +4027,18 @@ li.main_category li.subcategory > span > label{
     #top-menu {
         padding-left: 15px;
     }
+    #topbar .nav > li.action#top-menu-first {
+        display: none;
+    }
+    #topbar .nav > li.action {
+        display: inline-block;
+        padding-right: 15px;
+        padding-left: 20px;
+    }
+    
+    #search-box{
+        width: 250px;
+    }
 }
 
 @media screen and (max-width: 750px) {
@@ -4023,8 +4048,17 @@ li.main_category li.subcategory > span > label{
     .modal-dialog.modal-xl {
         width: auto;
     }
-    #topbar{
-        position: fixed;
+    #topbar .navbar-nav {
+        margin: 7.5px -4px;
+    }
+    #extra-pages{
+        background-color: #fff;
+        margin: 0;
+        left: 0;
+        right: 0;
+        top: 48px;
+        z-index: 1000;
+        position: absolute;
     }
     .map-footer, #footer-panel, #panel, #hide-panel, #maps-lnk{
         display: none;
@@ -4090,13 +4124,12 @@ li.main_category li.subcategory > span > label{
     div#panel{
         width: 100%;
         bottom: auto;
-        margin-top: 78px;
         position: relative;
     }
     div#sidebar{
         height: auto;
         top: 0;
-        padding: 0;
+        padding: 12px 0;
     }
     div#panel{
         background-size: auto 80px;
@@ -4114,6 +4147,7 @@ li.main_category li.subcategory > span > label{
     }
     #search-box{
         padding-bottom: 0;
+        width: 100%;
     }
     .sidebar-handler,
     #frm_categories{
@@ -4182,13 +4216,14 @@ li.main_category li.subcategory > span > label{
         right: 1.5em;
         left: auto;
     }
-    .search-box-col{
+    .nav li.search-box-col{
         display: block;
         position: absolute;
         width: 100%;
-        top: 35px;
+        top: 50px;
         background-color: #fff;
         padding: 8px;
+        margin-left: 15px;
     }
     #topbar{
         box-shadow: none;