diff --git a/biographie.html b/biographie.html
index a18ce7d..64c6535 100644
--- a/biographie.html
+++ b/biographie.html
@@ -13,8 +13,9 @@
 <body>
     <header>
         <nav>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
+            <div id="hamburger">
+                <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+            </div>
             <ul>
                 <li class="title"><a href="index.html">Ginou</a></li>
                 <li class="selected"><a href="biographie.html">Biographie</a></li>
diff --git a/divers.html b/divers.html
index 99c2228..ff66234 100644
--- a/divers.html
+++ b/divers.html
@@ -20,8 +20,9 @@
 <body>
     <header>
         <nav>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
+            <div id="hamburger">
+                <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+            </div>
             <ul>
                 <li class="title"><a href="index.html">Ginou</a></li>
                 <li><a href="biographie.html">Biographie</a></li>
diff --git a/explorer.html b/explorer.html
index 396a719..9ceabeb 100644
--- a/explorer.html
+++ b/explorer.html
@@ -13,8 +13,9 @@
 <body>
     <header>
         <nav>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
+            <div id="hamburger">
+                <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+            </div>
             <ul>
                 <li class="title"><a href="index.html">Ginou</a></li>
                 <li><a href="biographie.html">Biographie</a></li>
diff --git a/exposition.html b/exposition.html
index 08f1e31..7cf43d9 100644
--- a/exposition.html
+++ b/exposition.html
@@ -18,8 +18,9 @@
 <body>
     <header>
         <nav>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
+            <div id="hamburger">
+                <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+            </div>
             <ul>
                 <li class="title"><a href="index.html">Ginou</a></li>
                 <li><a href="biographie.html">Biographie</a></li>
diff --git a/index.html b/index.html
index 5f6213e..5564fcf 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,9 @@
 <body>
     <header>
         <nav>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
+            <div id="hamburger">
+                <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+            </div>
             <ul>
                 <li class="title selected"><a href="index.html">Ginou</a></li>
                 <li><a href="biographie.html">Biographie</a></li>
diff --git a/informations.html b/informations.html
index 19ac7d3..994c4fe 100644
--- a/informations.html
+++ b/informations.html
@@ -15,8 +15,9 @@
 <body>
     <header>
         <nav>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
+            <div id="hamburger">
+                <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+            </div>
             <ul>
                 <li class="title"><a href="index.html">Ginou</a></li>
                 <li><a href="biographie.html">Biographie</a></li>
diff --git a/painting.html b/painting.html
index e29ee76..ba39c47 100644
--- a/painting.html
+++ b/painting.html
@@ -13,8 +13,9 @@
 <body>
     <header>
         <nav>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
-            <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
+            <div id="hamburger">
+                <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+            </div>
             <ul>
                 <li class="title"><a href="index.html">Ginou</a></li>
                 <li><a href="biographie.html">Biographie</a></li>
diff --git a/styles/main.css b/styles/main.css
index d341925..2d91110 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -82,29 +82,39 @@ header nav .mobile-menu-close {
         margin-bottom: 0.5rem;
     }
 
-    header nav .mobile-menu-open {
+    header nav #hamburger {
         display:block;
-        position:absolute;
         right:1rem;
         font-size:1.5rem;
-        cursor:pointer;
-    }
-
-    header nav.active .mobile-menu-open {
-        display:none;
-    }
-
-    header nav.active .mobile-menu-close {
-        display:block;
         position:absolute;
-        right:1rem;
-        font-size:1.5rem;
+    }
+
+    header nav #hamburger .container {
+        display:inline-block;
         cursor:pointer;
     }
-
-    header nav.active .mobile-menu-close span {
+      
+    header nav #hamburger .bar1,
+    header nav #hamburger .bar2,
+    header nav #hamburger .bar3 {
+        width:30px;
+        height:3px;
+        background-color:#38686A;
+        margin:6px 0;
+        transition:0.4s;
+    }
+      
+    header nav.active #hamburger .bar1 {
+        transform:rotate(-45deg) translate(-4px, 6px);
+    }
+      
+    header nav.active #hamburger .bar2 {
+        opacity:0;
+    }
+      
+    header nav.active #hamburger .bar3 {
+        transform:rotate(45deg) translate(-6px, -9.5px);
     }
-
 
     header nav ul li {
         display:none;
