diff --git a/_includes/headers.html b/_includes/headers.html
index e381ec5e02aabdd60f146e0fcfbceebb9aef377f..5fad512bb2d82a51c9642b345bdcc203ae6f99d4 100755
--- a/_includes/headers.html
+++ b/_includes/headers.html
@@ -1,9 +1,9 @@
 <header class="siteHeader" id="site_header">
   <div id="header_iv_point" class="inviewTop"></div>
   <span class="brandLogo"><a href="/index.html" rel="home" title=
-  "Frama-C"><img src="/assets/img/framac.gif" alt=""><span>Frama-C</span></a></span><a role="button" id=
-  "menu_toggle" class="menuToggle"><span class="open" onclick="openMenu()"><i></i><i></i><i></i></span><span class="close" onclick="closeMenu()"><i></i><i></i></span></a>
+  "Frama-C"><img src="/assets/img/framac.gif" alt=""><span>Frama-C</span></a></span>
 
+  <input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>
   <nav id="menu" role="navigation">
 	<div class="menu-primary-meny-container">
 	  <ul id="menu-primary-meny" class="menu">
@@ -21,16 +21,5 @@
 	<a role="button" href="/html/get-frama-c.html" id="header_download_link" class="btnDownload"><span><i class=
 	"icon icon-curly-left"></i><i class="icon icon-download-arrow"></i><i class="icon icon-curly-right"></i></span></a>
   </nav>
+  
 </header>
-
-<script>
-function openMenu(){
-  var x = document.getElementById("site_header");
-  x.classList.add("menuOpen");
-}
-
-function closeMenu(){
-  var x = document.getElementById("site_header");
-  x.classList.remove("menuOpen");
-}
-</script>
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
index 67f0a9fed3622bedb4dd2ee28ba7e11ad9dfb56d..2882c3be47ea26c1ea45be2d45aca8331371afc8 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -560,7 +560,7 @@ div#wpadminbar:hover div#wp-toolbar {
   }
 }
 .siteHeader.menuOpen nav {
-  display: block;
+  display: none;
 }
 @media (min-width:  768px) {
   .siteHeader nav {
@@ -733,68 +733,93 @@ div#wpadminbar:hover div#wp-toolbar {
     height: 65px;
   }
 }
-.menuToggle {
+
+.burger {
+  display: inline-block;
+  border: 0;
+  background: none;
+  outline: 0;
+  padding: 0;
+  cursor: pointer;
+  border-bottom: 4px solid #f7931c;
+  border-radius: 2px;
+  width: 28px;
+  transition: border-bottom 1s ease-in-out;
+  -webkit-transition: border-bottom 1s ease-in-out;
   position: absolute;
   right: 15px;
   top: 15px;
   z-index: 62;
   backface-visibility: hidden;
-}
-.menuToggle span {
-  display: block;
   margin: 8px 0 8px 8px;
-  position: relative;
-  width: 26px;
-  height: 22px;
-}
-.menuToggle span i {
-  background: #f7931c;
-  border-radius: 8px;
-  display: block;
-  height: 4px;
-  width: 26px;
-  transition: all 0.4s;
-  transform: scaleY(0.8);
-  position: absolute;
-  right: 0;
-}
-.menuToggle span i:first-child {
-  top: 0;
 }
-.menuToggle span i:first-child + i {
-  top: 8px;
+.burger::-moz-focus-inner {
+  border: 0;
+  padding: 0;
 }
-.menuToggle span i:first-child + i + i {
-  top: 16px;
+.burger:before {
+  content: "";
+  display: block;
+  border-bottom: 4px solid #f7931c;
+  border-radius: 8px;
+  width: 100%;
+  margin-bottom: 5px;
+  transition: -webkit-transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
+  -webkit-transition: -webkit-transform 0.5s ease-in-out;
 }
-.menuToggle span.close i {
-  background: #fff;
-  width: 26px;
-  height: 3px;
+.burger:after {
+  content: "";
+  display: block;
+  border-bottom: 4px solid #f7931c;
+  width: 100%;
+  margin-bottom: 5px;
+  border-radius: 8px;
+  transition: -webkit-transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
+  -webkit-transition: -webkit-transform 0.5s ease-in-out;
 }
-.menuToggle .close {
+
+.burger-check {
   display: none;
 }
-.menuOpen .menuToggle .open {
-  display: none;
+
+.burger-check:checked ~ .burger {
+  border-bottom: 4px solid transparent;
+  border-radius: 0px;
+  transition: border-bottom 0.8s ease-in-out;
+  -webkit-transition: border-bottom 0.8s ease-in-out;
+}
+.burger-check:checked ~ .burger:before {
+  border-radius: 0px;
+  border-bottom: 4px solid white;
+  transform: rotate(-405deg) translateY(1px) translateX(-3px);
+  -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
+  transition: -webkit-transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
+  -webkit-transition: -webkit-transform 0.5s ease-in-out;
+}
+.burger-check:checked ~ .burger:after {
+  border-radius: 0px;
+  border-bottom: 4px solid white;
+  transform: rotate(405deg) translateY(-4px) translateX(-5px);
+  -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
+  transition: -webkit-transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
+  -webkit-transition: -webkit-transform 0.5s ease-in-out;
 }
-.menuOpen .menuToggle .close {
+
+.burger-check:checked ~ #menu {
   display: block;
 }
-.menuOpen .menuToggle span i {
-  transform: rotate(45deg);
-}
-.menuOpen .menuToggle span i:first-child {
-  top: 8px;
-  width: 26px;
-}
-.menuOpen .menuToggle span i:first-child + i {
-  transform: rotate(-45deg);
-  top: 8px;
-  width: 26px;
-}
+
+
 @media (min-width:  768px) {
-  .menuToggle {
+  .burger {
     display: none;
   }
 }