Responsive menu

themes/datacoop2020/assets/static/css/style.scss

@@ -75,8 +75,11 @@ body {
 }
 
 .everything-container {
-  height: 100%;
-  max-width: 1200px;
+  // Desktop
+  @include media-breakpoint-up(md) {
+      height: 100%;
+      max-width: 1200px;
+  }
   padding: 0;  // Overwrites .container-fluid
   margin: 0;  // Overwrites .container-fluid
 
@@ -84,11 +87,20 @@ body {
   {
     max-width: 1200px;
     margin: 0;  // Overwrites .row
-  height: 100%;
+    height: 100%;
   }
   
 }
 
+// Mobile
+@include media-breakpoint-down(sm) {
+  display: block;
+  .datacoop-sidebar {
+    height: 0;
+    display: block;
+  }
+}
+
 .datacoop-sidebar {
   background-color: $datacoop-light-blue;
 }
@@ -104,12 +116,25 @@ body {
     color: $datacoop-purple;
   }
 
-  .datacoop-menulists
-  {
-    /*position: absolute;*/
-    /*bottom: 20px;*/
+  // Mobile
+  @include media-breakpoint-down(sm) {
+    display: block;
+    width: 100%;
   }
+  // Desktop
+  @include media-breakpoint-up(md) {
+    height: 100%;
+    width: 340px;
 
+
+      // Overwrite because of usage of flexbox stuff, we use display: block
+      .navbar-collapse,
+      .datacoop-menulists
+      {
+        display: block !important;
+      }
+
+  }
   .data-coop-sidebar-logo
   {
     display: block;
@@ -118,8 +143,9 @@ body {
       display: block;
       width: 100%;
       margin-left: 2px;
+      max-width: 400px;
     }
-    font-size: 20px;
+    margin-bottom: 30px;
   }
 
   ul
@@ -138,14 +164,15 @@ body {
 
   ul > li > a
   {
-    font-size: 40px;
+    font-size: 30px;
   }
 
   ul.datacoop-langchooser
   {
+    display: block !important;
     margin-top: 20px;
     li {
-      display: inline-block;
+      display: block;
       margin-right: 20px;
       a {
         font-size: 18px;

themes/datacoop2020/layouts/_default/baseof.html

@@ -9,10 +9,8 @@
 
   <div class="row">
 
-    <div class="col-md-3 datacoop-sidebar d-print-none navbar navbar-expand-md mb-3" style="min-width: 340px;">
-      <div style="width: 340px; height: 100%;">
+    <div class="col-md-3 datacoop-sidebar d-print-none navbar navbar navbar-light navbar-expand-md">
         {{ partial "nav.html" . }}
-      </div>
     </div>
 
     <div class="col-md-1 datacoop-sidebar-gutter d-print-none d-none d-md-flex">