diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
index 3d6d8b8..b24cb45 100644
--- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
+++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
@@ -198,9 +198,9 @@ header {
         display: none; }
     header .header_nav_container .close-block {
       order: 1; }
-  header .close-block, header .open-block {
+  header .close-block, header .open-block, header .open-block.opened {
     cursor: pointer; }
-    header .close-block span, header .open-block span {
+    header .close-block span, header .open-block span, header .open-block.opened span {
       display: block;
       width: 33px;
       height: 2px;
@@ -208,17 +208,6 @@ header {
       background: black;
       border-radius: 3px;
       z-index: 1; }
-  header .close-block {
-    order: 1;
-    grid-column: 12;
-    display: none;
-    margin: auto; }
-    header .close-block span {
-      transform-origin: center; }
-    header .close-block > div > span:first-child {
-      transform: translateY(57%) rotate(45deg); }
-    header .close-block > div > span:nth-child(2) {
-      transform: rotate(-45deg); }
   header .open-block {
     height: 100%;
     display: grid;
@@ -227,6 +216,17 @@ header {
     header .open-block span {
       margin-bottom: 5px;
       transform-origin: 4px 0px; }
+  header .open-block.opened {
+    margin: auto; }
+    header .open-block.opened span {
+      transform-origin: center;
+      margin-bottom: 0; }
+    header .open-block.opened > div > span:first-child {
+      transform: translateY(57%) rotate(45deg); }
+    header .open-block.opened > div > span:nth-child(2) {
+      transform: rotate(-45deg); }
+    header .open-block.opened > div > span:nth-child(3) {
+      display: none; }
 
 .footer {
   display: grid;
diff --git a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
index 8b6b194..4173d47 100644
--- a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
+++ b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
@@ -31,9 +31,12 @@
     // });
     $('.open-block').click(function(){
       $(this).prev().css("display","grid");
+      $(this).toggleClass('opened');
+   
       if(mobile == true){
         $("body").css("overflow","hidden");
       }
+      
     });
   
     // Hide the header_nav_container when a link inside it is clicked
diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
index 26bae58..2f612f5 100644
--- a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
@@ -94,7 +94,7 @@ header{
 
     }
     
-    .close-block, .open-block{
+    .close-block, .open-block, .open-block.opened{
         cursor:pointer;
         span{
             display: block;
@@ -106,28 +106,28 @@ header{
             z-index: 1;
         }
     }
-    .close-block{
-        order: 1;
-        grid-column: 12;
-        display: none;
-        margin: auto;
-        span{
-            transform-origin: center;
-        }
-        &>div>span:first-child{
+    // .close-block{
+    //     order: 1;
+    //     grid-column: 12;
+    //     display: none;
+    //     margin: auto;
+    //     span{
+    //         transform-origin: center;
+    //     }
+    //     &>div>span:first-child{
             
-            transform: translateY(57%)rotate(45deg);
-        }
-        &>div>span:nth-child(2){
-            transform: rotate(-45deg);
-        }
-        // @include breakpoint(small down) {
-        //     position: absolute;
-        //     top: 1rem;
-        //     right: 1rem;
-        // }
+    //         transform: translateY(57%)rotate(45deg);
+    //     }
+    //     &>div>span:nth-child(2){
+    //         transform: rotate(-45deg);
+    //     }
+    //     // @include breakpoint(small down) {
+    //     //     position: absolute;
+    //     //     top: 1rem;
+    //     //     right: 1rem;
+    //     // }
     
-    }
+    // }
     .open-block{
         height: 100%;
         display: grid;
@@ -138,4 +138,22 @@ header{
             transform-origin: 4px 0px;
         }
     }
+    .open-block.opened {
+        margin: auto;
+        span {
+            transform-origin: center;
+            margin-bottom: 0;
+        }
+        &>div>span:first-child {
+            transform: translateY(57%) rotate(45deg);
+        }
+        &>div>span:nth-child(2) {
+            transform: rotate(-45deg);
+        }
+        &>div>span:nth-child(3) {
+            display: none;
+        }
+
+    }
+    
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig b/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig
index 95ff063..588a459 100644
--- a/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig
@@ -17,12 +17,12 @@
 {% if content %}
   <div{{ attributes }}>
     {{ content }}
-    <div class="close-block" >
+    {# <div class="close-block" >
       <div>
         <span></span>
         <span></span>
       </div>
-    </div>
+    </div> #}
   </div>
   <div class="open-block" >
     <div>