public/css/header.css

@@ -19,12 +19,14 @@
     color: #000;
     text-decoration: none;
 }
+
 a:visited{
     color: #000;
     text-decoration: none; 
 }
 
 .headerMenu{
+    background-color: #fff;
     font-family: "Poppins";
     font-weight: 400; /*regular*/ 
     font-size: 1.25rem; /*20px*/
@@ -49,18 +51,39 @@ text-decoration: none;
     fill: #394596;
     height: 50px;
     width: 50px;
+    display: block;
+    cursor: pointer;
+}
 
+.headerMenuMobile{
+    font-family: "Poppins";
+    font-weight: 400; /*regular*/ 
+    font-size: 1.25rem; /*20px*/
+    color: #000;  /*Noir pur*/
+    list-style: none;
+    font-style: none;
+    display: none;
+  }
+
+  .nav-is-active{
+    background-color: #fff;
+    font-size: 2rem; /*32px*/
+    display: flex;
+    flex-flow: column;
+    justify-content: space-around;
+    align-items: center;
+    text-align: left;
+    position: fixed;
+    top: 75px;
+    width: 100%;
+    height: 90%;
+    margin: 0;
+padding-top: 200px;
+padding-bottom: 200px;
 
   }
 
     /* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
-
- 
-    .headerMenuHamburger{
-        display: block;
-    }
-  
-
 @media screen and (min-width: 778px) {
     .headerMenu{
         display: none; 
@@ -68,6 +91,11 @@ text-decoration: none;
     .headerMenuHamburger{
         display: block;
     }
+    .nav-is-active{
+        font-size: 3rem; /*48px*/
+        padding-top: 100px;
+        padding-bottom: 100px;
+    }
 }
 
       /* Les éléments du header s'affichent pour le breakpoint ordinateur */
@@ -81,23 +109,10 @@ text-decoration: none;
     .headerMenuHamburger{
         display: none;
     }
-  }
-
-  .headerMenuMobile{
-    font-family: "Poppins";
-    font-weight: 400; /*regular*/ 
-    font-size: 1.25rem; /*20px*/
-    color: #000;  /*Noir pur*/
-    list-style: none;
-    font-style: none;
+    .nav-is-active{
         display: none;
     }
-  .nav-is-active{
-    background-color: #fff;
-    display: flex;
-    flex-flow: column;
-    justify-content: space-between;
-    position: fixed;
-    top: 75px;
 }
 
+
+

templates/html/header.gohtml

@@ -3,7 +3,6 @@
     <script>
         function  onToggleNav() {
         var menu = document.querySelector(".headerMenuMobile");
-        console.log(menu);
         menu.classList.toggle('nav-is-active');
       }
         </script>