Responsive menu

This commit is contained in:
Benjamin Bach 2021-05-04 22:21:50 +02:00
parent f60a5a5e9c
commit 47b221d422
Signed by: benjaoming
GPG key ID: 7D49441634585664
2 changed files with 38 additions and 13 deletions

View file

@ -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;

View file

@ -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">