fix navbar on smaller displays

[rnaseq-cwl-training.git] / css / swc.css

diff --git a/css/swc.css b/css/swc.css
index 1560f8357bed1fd7c75baf24681abc58627c4a10..ebcc309fc45b5046afad67fa9911eec5a4d7fb7c 100644 (file)
--- a/css/swc.css
+++ b/css/swc.css
@@ -668,6 +668,43 @@ div.chapter h2 {
     top: auto;
 }
 
+/* Collapse navbar */
+@media (max-width: 1200px) {
+    .navbar-header {
+        float: none;
+    }
+    .navbar-left,.navbar-right {
+        float: none !important;
+    }
+    .navbar-toggle {
+        display: block;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-fixed-top {
+               top: 0;
+               border-width: 0 0 1px;
+       }
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+    .navbar-nav {
+        float: none!important;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .collapse.in{
+               display:block !important;
+       }
+}
+
 /* GitHub ribbon breaking point */
 @media screen and (min-width: 600px) {
     #github-ribbon {