diff --git a/_includes/header.html b/_includes/header.html
index 60990c64517eb84127a2f950e14ec67931a9c622..354023daebadbc1d988dbae5c1da7404b8744786 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -45,14 +45,11 @@ See also:
                 The search button shall always be visible.
             {% endcomment %}
             <a href="{{ 'search' | relative_url }}" class="outer-nav-item"><i class="fas fa-search"></i></a>
+            <button onclick="toggleMenu();scrollableHeader()" type="button" class="nav_toggle" id="menu-button">
+                <i class="fas fa-bars"></i>
+            </button>
 
-            {% comment %}
-                The following button shall be always minimized (hamburger menu).
-            {% endcomment %}
-            <input type="checkbox" id="mobile_toggle" class="d-none">
-            <label for="mobile_toggle" class="nav_toggle" onclick="scrollableHeader()"></label>
-
-            <nav>
+            <nav id="menu">
                 <ul class="nav-grid">
                     {% for category in site.data.navigation.header %}
                     <li class="nav-first-level">
diff --git a/_sass/common/_header.scss b/_sass/common/_header.scss
index 53d2a167a789c5c87eaf5697066d7e599fe52869..3e4988f15b7f6aa2dfb9ce3727d13a39f432ad3e 100644
--- a/_sass/common/_header.scss
+++ b/_sass/common/_header.scss
@@ -105,27 +105,9 @@
         &:focus {
             color: $color-helmholtz-bright-blue;
         }
-
-        &:before {
-            font:           var(--fa-font-solid);
-            content:        "\f0c9";
-        }
-    }
-
-    /*
-    This SCSS part is used to mimic the behavior, previously implemented
-    via Javascript, in pure CSS using a technique called "Checkbox Hack"
-    https://css-tricks.com/the-checkbox-hack/. This works by connecting
-    a <label> with <input type="checkbox"> and hiding the <label>.
-    Clicking on the label toggles the :checked state of this ID and allows
-    for applying different style.
-    */
-    #mobile_toggle:checked ~ .nav_toggle::before {
-        content:        "\f00d";
-        color:          $color-helmholtz-blue;
     }
 
-    #mobile_toggle:checked ~ nav {
+    .nav-expanded {
 
         display:            flex;
         flex-direction:     column;
diff --git a/assets/js/header.js b/assets/js/header.js
index f3b0fb594943e6694a424609e545c376231bb6ef..aa7c468a2cf0da94a405e406fad1bd91b6869142 100644
--- a/assets/js/header.js
+++ b/assets/js/header.js
@@ -21,3 +21,15 @@ function scrollableHeader() {
     document.getElementById("header").classList.toggle("scrollable-header");
     document.body.classList.toggle("no-scroll");
 }
+
+function toggleMenu() {
+    document.getElementById("menu").classList.toggle("nav-expanded");
+    menuIconClassList = document.getElementById("menu-button").firstElementChild.classList;
+    if (menuIconClassList.contains("fa-bars")) {
+        menuIconClassList.remove("fa-bars");
+        menuIconClassList.add("fa-x");
+    } else {
+        menuIconClassList.remove("fa-x");
+        menuIconClassList.add("fa-bars");
+    }
+}