From 8861a2a7253d995f691e14967b3549b8f33c556b Mon Sep 17 00:00:00 2001
From: KoenS <koen@divd.nl>
Date: Sun, 8 Dec 2024 15:07:08 +0100
Subject: [PATCH] Update menu.scss

Fix grote lege ruimte aan het einde van de pagina's
---
 assets/css/menu.scss | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index aa60cecc..00507dba 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -24,6 +24,45 @@ $menu-bg-hover: #267CB9;
 //$menu-bg-image: linear-gradient(120deg, #155799, #159957);
 $menu-bg-image: none;
 
+@media only screen and (min-width: 736px) {
+  .nav {
+    width: 100%;
+    max-width: 100vw;
+    display: flex;
+    justify-content: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+  }
+   .nav .menu {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0;
+    padding: 0;
+    justify-content: space-between;
+
+    .menu-item {
+      position: relative;
+      white-space: nowrap;
+
+      .sub-menu {
+        position: absolute;
+        z-index: 3000;
+        top: 100%;
+        left: 0;
+        max-width: min(700px, calc(100vw - 40px));
+        white-space: normal;
+       }
+     }
+
+    & > .menu-item:nth-last-child(-n+3) .sub-menu {
+      left: auto;
+      right: 0;
+    }
+  }
+}
+  
 // 2 //
 $menu-co: #267CB9;
 $menu-co-hover: #fff;
@@ -469,4 +508,4 @@ Show the link that contains should open and close the topnav (.icon) */
 /* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon. */
 @media screen and (max-width: 736px) {
   .menu.responsive {display: block;}
-}
\ No newline at end of file
+}