js menu burger

web/themes/custom/eql/css-compiled/styles.css

@@ -82,7 +82,6 @@
 /* Manifont Grotesk */
 /* Colors used for EQL */
 .layout-container {
-  position: absolute;
   font-family: "Marianne", sans-serif;
   margin: none;
   top: 0%;
@@ -217,6 +216,7 @@ a {
     display: flex;
     flex-direction: column; }
   #header-top #block-burger {
+    z-index: 1;
     background-color: #009ee3;
     font-size: 0.7rem;
     color: white;
@@ -224,40 +224,42 @@ a {
     width: 7rem;
     height: 7rem;
     margin-top: 0; }
+    #header-top #block-burger :hover {
+      cursor: pointer; }
     #header-top #block-burger h2::after {
       display: block;
       font-family: 'Font Awesome';
       content: "\f0c9";
-      font-size: 5rem; }
+      height: 60px;
+      font-size: 1rem; }
     #header-top #block-burger #block-burger-menu {
       display: block;
-      margin-top: 0;
+      margin: 0;
       align-self: center;
-      text-align: center; }
+      text-align: center;
+      height: 7rem; }
     #header-top #block-burger ul {
-      display: none; }
-      #header-top #block-burger ul .open {
-        width: 100vw;
-        position: relative;
-        bottom: 8%;
-        left: calc(-30vw + 50%);
-        display: block;
-        height: fit-content;
-        padding-bottom: 1rem;
-        padding-top: 1rem;
-        background-color: #009ee3;
-        line-height: 2rem;
-        list-style: none; }
-        #header-top #block-burger ul .open .ul1 .sous-liste {
-          left: calc(-50vw + 50%);
-          padding-top: 0; }
-          #header-top #block-burger ul .open .ul1 .sous-liste a {
-            opacity: 1; }
-        #header-top #block-burger ul .open a {
-          color: white;
-          font-weight: 800;
-          font-size: 1.7rem;
-          opacity: 0.7; }
+      display: none;
+      width: 100vw;
+      position: relative;
+      bottom: 8%;
+      left: calc(-30vw + 50%);
+      height: fit-content;
+      padding-bottom: 1rem;
+      padding-top: 1rem;
+      background-color: #009ee3;
+      line-height: 2rem;
+      list-style: none; }
+      #header-top #block-burger ul .ul1 .sous-liste {
+        left: calc(-50vw + 50%);
+        padding-top: 0; }
+        #header-top #block-burger ul .ul1 .sous-liste a {
+          opacity: 1; }
+      #header-top #block-burger ul a {
+        color: white;
+        font-weight: 800;
+        font-size: 1.7rem;
+        opacity: 0.7; }
 
 #fotter-bottom {
   display: flex;

web/themes/custom/eql/eql.libraries.yml

@@ -7,10 +7,8 @@ global-css:
 
 
 
-
 global-js:
 
   js:
-    theme:
        js/eql-menu-burger.js: {}
        

web/themes/custom/eql/js/eql-menu-burger.js

@@ -1,29 +1,20 @@
-  
-// jQuery(document).ready(function($){
-  
-  
-//   $("#block-burger").click(function(event){
-//         var mods = document.querySelectorAll('.ul1');
-//         mods.forEach((m, i) => {
-//         m.classList.remove('.open')
-//         });
 
-//         var btn  = event.currentTarget;
-//         var mod = btn.parentNode.querySelector('.ul1');
-//         mod.classList.add('.open')
+// menu burger open
 
-//     });
+// document.getElementById("block-burger").addEventListener("click", menuOpen);
 
-//     $(".ul1, .ul1 a").click(function(event){
-//         $ (".ul1").removeClass(".open");
-//         return false;
-//     });
+// function menuOpen() {
+//   document.querySelector("ul").style.display = "block";
+// }
 
-// });
 
-remove.onClick = () => {
-    const ul1 = document.querySelector('.ul1');
+var burgerButon = document.getElementById('block-burger-menu');
+var blockMenuOpen = document.querySelector(/html/body/div/div/header/section/div[2]/nav/ul.ul1);
 
-        ul1.classList.add("open");
-    
+function menuOpen() {
+    if (blockMenuOpen.style.display === 'none') {
+        blockMenuOpen.style.display = 'block';
+    } else {
+        blockMenuOpen.style.display = 'none';
+    }
 }

web/themes/custom/eql/scss/global/_layout.scss

@@ -5,7 +5,7 @@
 
 
 .layout-container {
-    position: absolute;
+    // position: absolute;
     font-family: $font-family-default;
     margin: none;
     top: 0%;

web/themes/custom/eql/scss/partials/_header.scss

@@ -57,69 +57,63 @@
 
     // }
     #block-burger {
+        z-index: 1;
         background-color: $blue-light;
         font-size: 0.7rem;
         color: $white;
         display: block;
-
         width: 7rem;
         height: 7rem;
         margin-top: 0;
+        :hover{
+            cursor: pointer;
+        }
         h2::after{
             display: block;
             font-family: 'Font Awesome';
             content: "\f0c9";
+            height: 60px;
 
-            font-size: 5rem;
+            font-size: 1rem;
         }
 
         #block-burger-menu{
             display: block;
-            // content:  url(../../images/pictos/icons8-menu.svg); 
-            margin-top: 0;
+            margin: 0;
             align-self: center;
             text-align: center;
-
+            height:7rem;
         }
 
-            ul {
-                display: none;
-                .open{
-                    width: 100vw;
-                    position: relative;
-                    bottom:8%;;
-                    left: calc(-30vw + 50%);
-                    display: block;
-                    height: fit-content;
-                    padding-bottom: 1rem;
-                    padding-top: 1rem;
-                    background-color: $blue-light;
-                    line-height: 2rem;
-                    list-style: none;
-            
-                    .ul1 .sous-liste{
-                        left: calc(-50vw + 50%);
-                        padding-top: 0;
-                        a{
-                            opacity: 1;
-                        }
-                    }
-                    a{
-                        color: $white;
-                        font-weight: 800;
-                        font-size: 1.7rem;
-                        opacity: 0.7;
-                    }
-                } 
+        // ul {display: none;}
+        ul  {
+            display: none;
+            width: 100vw;
+            position: relative;
+            bottom:8%;;
+            left: calc(-30vw + 50%);
+            height: fit-content;
+            padding-bottom: 1rem;
+            padding-top: 1rem;
+            background-color: $blue-light;
+            line-height: 2rem;
+            list-style: none;
+        
+            .ul1 .sous-liste{
+                left: calc(-50vw + 50%);
+                padding-top: 0;
+                a{
+                    opacity: 1;
+                }
+            }
+            a{
+                color: $white;
+                font-weight: 800;
+                font-size: 1.7rem;
+                opacity: 0.7;
             }
+        }
     }   
 
-
-
-    
-    
-    
-
-
 }