public/css/header.css

@@ -7,24 +7,26 @@
     height: 75px;
     }
 
-    .headerWrapper{
-        display: flex;
-        flex-flow: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px;
-    }
+.headerWrapper{
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+}
 
-    a{
-color: #000;
-text-decoration: none;
-    }
-    a:visited{
-        color: #000;
-        text-decoration: none; 
-    }
+a{
+    color: #000;
+    text-decoration: none;
+}
 
-.headerMenu {
+a:visited{
+    color: #000;
+    text-decoration: none; 
+}
+
+.headerMenu{
+    background-color: #fff;
     font-family: "Poppins";
     font-weight: 400; /*regular*/ 
     font-size: 1.25rem; /*20px*/
@@ -33,45 +35,71 @@ text-decoration: none;
     font-style: none;
     display: none;
     width: 100%;
-    }
+}
 
-    .headerMenuElement{
-        padding-bottom: 5px;
-    }
+.headerMenuElement{
+    padding-bottom: 5px;
+}
 
 .headerMenuElement:hover {
     border-bottom: 5px #FF563C solid; /*Orange Highlight*/
     cursor: pointer;
     padding-bottom: 0;
-    }
+}
 
-    .headerMenuHamburger{
-        fill: #394596;
-        height: 50px;
-        width: 50px;
-  
+.headerMenuHamburger{
+    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{
+@media screen and (min-width: 778px) {
+    .headerMenu{
         display: 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 */
-  @media screen and (min-width: 1140px) {
+@media screen and (min-width: 1140px) {
     .headerMenu{
         display: flex;
         flex-flow: row;
@@ -81,23 +109,10 @@ text-decoration: none;
     .headerMenuHamburger{
         display: none;
     }
-  }
+    .nav-is-active{
+        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;
-    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>