add the 'sticky menu' funct

ot_templating/Resources/Public/assets/script/main.js

@@ -65,6 +65,25 @@ $(document).ready(function(){
         }
     });
 
+    // * Sticky menu
+    var menuTop = $('#menu').offset().top;
+    var menuHeight = $('#menu').height();
+
+    $(function(){
+        $(window).scroll(function() {
+            console.log($(this).scrollTop());
+            console.log(menuTop);
+            if ($(this).scrollTop() >= menuTop) {
+                $('#menu').addClass('sticky');
+            }
+            else if (($(this).scrollTop() < (menuTop - menuHeight))) {
+                $('#menu').removeClass('sticky');
+            }
+        });
+    });
+
+
+
 
     // **** Login Pop-Up and Auth
     $('#login-btn').on('click', function(e) {

ot_templating/Resources/Public/assets/style/Readme.md

@@ -9,6 +9,7 @@ Pour compiler les fichiers à chaque modification, lancer dans ce répertoire:
     sass --watch theme-blue.scss theme-blue.css
     sass --watch theme-green.scss theme-green.css
     sass --watch theme-orange.scss theme-orange.css
+    ...Etc
 
 Le dossier `common` contient le 'tronc commun'. 
 Tous les fichiers présents dans `common` sont inclus dans le fichier `style.scss`, 

ot_templating/Resources/Public/assets/style/common/base.scss

@@ -10,5 +10,5 @@ a {
 
 // Ensures the jquery-ui datepicker is above anything else (even leaflet maps)
 .ui-datepicker {
-  z-index:10000 !important;
+  z-index:9998 !important;
 }

ot_templating/Resources/Public/assets/style/common/module/menu.scss

@@ -31,6 +31,7 @@ $submenu-item-height: 30px;
   margin: 0 0 1em;
 
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -124,3 +125,10 @@ $submenu-item-height: 30px;
   color: $menu-dropdown-font-color;
   font-size: $menu-font-size;
 }
+
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}

ot_templating/Resources/Public/assets/style/style.css

@@ -1,10 +1,14 @@
 @charset "UTF-8";
+body {
+  overflow-x: hidden;
+}
+
 a {
   text-decoration: none;
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -98,9 +102,21 @@ ul.dropdown-left {
 }
 
 .topbar-logo img, .topbar-network-logo img {
+  margin: 6px;
+}
+
+.topbar-logo img {
   max-height: 95%;
 }
 
+.topbar-network-logo {
+  margin-left: 6px;
+}
+
+.topbar-network-logo img {
+  max-height: 50px;
+}
+
 .topbar-title {
   margin: 0 0.8em 0 0.8em;
   flex: 1;
@@ -127,18 +143,18 @@ ul.dropdown-left {
   padding: 0;
   align-items: center;
   margin: 0 0 1em;
+  position: relative;
+  z-index: 9999;
 }
 
-#menu::after {
+#menu:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #4facc6;
-  left: -20vw;
-  height: 50px;
-  width: 100%;
-  padding-left: 19.9vw;
-  padding-right: 19.9vw;
+  height: 100%;
+  left: -50%;
+  width: 200%;
   z-index: -1;
 }
 
@@ -220,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;
@@ -254,13 +277,13 @@ ul.dropdown-left {
 }
 
 .content h4 {
-  color: #4facc6;
+  color: #333333;
   font-size: 1.2em;
   font-weight: 500;
 }
 
 .content h5 {
-  color: #4facc6;
+  color: #333333;
   font-size: 1em;
   font-weight: 500;
 }
@@ -286,10 +309,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -20vw;
-  width: 100%;
-  padding-left: 19.9vw;
-  padding-right: 19.9vw;
+  left: -50%;
+  width: 200%;
   z-index: -1;
   margin: 0;
 }

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;

ot_templating/Resources/Public/assets/style/theme-grey.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;

ot_templating/Resources/Public/assets/style/theme-light-blue.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;

ot_templating/Resources/Public/assets/style/theme-light-red.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;

ot_templating/Resources/Public/assets/style/theme-light-red.scss

@@ -1,6 +1,5 @@
 // Red Theme
 $main-color: #dd453f;
-
 @use 'style' with (
   $menu-background-color: $main-color,
   $menu-background-color-hovered: $main-color,

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;

ot_templating/Resources/Public/assets/style/theme-purple.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;

ot_templating/Resources/Public/assets/style/theme-red.css

@@ -8,7 +8,7 @@ a {
 }
 
 .ui-datepicker {
-  z-index: 10000 !important;
+  z-index: 9998 !important;
 }
 
 .alert {
@@ -144,6 +144,7 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
+  z-index: 9999;
 }
 
 #menu:after {
@@ -235,6 +236,13 @@ ul.dropdown-left {
   font-size: 14px;
 }
 
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+#menu.sticky {
+  position: fixed;
+  top: 0;
+  max-width: 60vw;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;