diff --git a/_includes/nav.html b/_includes/nav.html
index 17115cc1..705e1a4f 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,85 +1,115 @@
-<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
-  <div class="container">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+<div class="fixed-top bg-dark">
+  <nav id="navbar">
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item">
-          <a class="nav-link" href="/index.html"><i class="fas fa-home"></i> <span class="sr-only">Home</span></a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="/providers/" id="providerDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Provider
-          </a>
-          <div class="dropdown-menu" aria-labelledby="providerDropdown">
-            <a class="dropdown-item" href="/providers/#ukusa"><i class="fab fa-creative-commons-nc fa-fw"></i> Avoid US & UK services</a>
-            <a class="dropdown-item" href="/providers/cloud-storage/"><i class="fas fa-cloud fa-fw"></i> Cloud Storage</a>
-            <a class="dropdown-item" href="/providers/dns/"><i class="fa fa-tasks fa-fw"></i> DNS</a>
-            <a class="dropdown-item" href="/providers/email/"><i class="fas fa-mail-bulk fa-fw"></i> Email</a>
-            <a class="dropdown-item" href="/providers/hosting/"><i class="fas fa-database fa-fw"></i> Hosting</a>
-            <a class="dropdown-item" href="/providers/paste/"><i class="fas fa-paste fa-fw"></i> Pastebins</a>
-            <a class="dropdown-item" href="/providers/search-engines/"><i class="fab fa-searchengin fa-fw"></i> Search Engines</a>
-            <a class="dropdown-item" href="/providers/social-networks/"><i class="fas fa-expand-arrows-alt fa-fw"></i> Social Networks</a>
-            <a class="dropdown-item" href="/providers/social-news-aggregator/"><i class="far fa-newspaper fa-fw"></i> Social News Aggregators</a>
-            <a class="dropdown-item" href="/providers/vpn/"><i class="far fa-eye-slash fa-fw"></i> VPN</a>
-          </div>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="/browsers/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Browser
-          </a>
-          <div class="dropdown-menu" aria-labelledby="browserDropdown">
-            <a class="dropdown-item" href="/browsers/#browser"><i class="fas fa-check fa-fw"></i> Recommendations</a>
-            <a class="dropdown-item" href="/browsers/#fingerprint"><i class="fas fa-fingerprint fa-fw"></i> Fingerprinting Info</a>
-            <a class="dropdown-item" href="/browsers/#webrtc"><i class="far fa-eye fa-fw"></i> WebRTC IP Leak Test</a>
-            <a class="dropdown-item" href="/browsers/#addons"><i class="far fa-list-alt fa-fw"></i> Browser Add-ons</a>
-            <a class="dropdown-item" href="/browsers/#about_config"><i class="fas fa-wrench fa-fw"></i> Firefox Tweaks</a>
-          </div>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="/software/" id="softwareDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Software
-          </a>
-          <div class="dropdown-menu" aria-labelledby="softwareDropdown">
-            <a class="dropdown-item" href="/software/calendar-contacts/"><i class="fas fa-calendar fa-fw"></i> Calendar/Contacts Sync Tools</a>
-            <a class="dropdown-item" href="/software/notebooks/"><i class="far fa-sticky-note fa-fw"></i> Digital Notebook</a>
-            <a class="dropdown-item" href="/software/email/#messaging"><i class="fas fa-random fa-fw"></i> Email Alternatives</a>
-            <a class="dropdown-item" href="/software/email/"><i class="fas fa-envelope fa-fw"></i> Email Clients</a>
-            <a class="dropdown-item" href="/software/encryption-tools/"><i class="fas fa-lock fa-fw"></i> File Encryption</a>
-            <a class="dropdown-item" href="/software/file-sharing/"><i class="fas fa-file-export fa-fw"></i> File Sharing</a>
-            <a class="dropdown-item" href="/software/passwords/"><i class="fas fa-user-lock fa-fw"></i> Password Manager</a>
-            <a class="dropdown-item" href="/software/productivity/"><i class="fas fa-briefcase fa-fw"></i> Productivity Tools</a>
-            <a class="dropdown-item" href="/software/real-time-communication/"><i class="fas fa-comments fa-fw"></i> Real-Time Communication</a>
-            <a class="dropdown-item" href="/software/file-sync/"><i class="fas fa-copy fa-fw"></i> Secure File Sync</a>
-            <a class="dropdown-item" href="/software/networks/"><i class="fas fa-user-secret fa-fw"></i> Self-contained Networks</a>
-            <a class="dropdown-item" href="/software/cloud/"><i class="fas fa-hdd fa-fw"></i> Self-Hosted Cloud Server</a>
-          </div>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="/operating-systems/" id="osDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            OS
-          </a>
-          <div class="dropdown-menu" aria-labelledby="osDropdown">
-            <a class="dropdown-item" href="/operating-systems/#os"><i class="fas fa-th-large fa-fw"></i> PC OS Recommendations</a>
-            <a class="dropdown-item" href="/operating-systems/#live_os"><i class="fas fa-compact-disc fa-fw"></i> Live CD Operating Systems</a>
-            <a class="dropdown-item" href="/operating-systems/#mobile_os"><i class="fas fa-mobile-alt fa-fw"></i> Mobile Operating Systems</a>
-            <a class="dropdown-item" href="/operating-systems/#aaddons"><i class="fas fa-th fa-fw"></i> Android Privacy Add-ons</a>
-            <a class="dropdown-item" href="/operating-systems/#firmware"><i class="fas fa-signal fa-fw"></i> Router Firmware</a>
-            <a class="dropdown-item" href="/operating-systems/#win10"><i class="far fa-thumbs-down fa-fw"></i> Don't use Windows 10</a>
-          </div>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="/index.html#participate">Participate</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav">
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fas fa-language text-danger"></i>
-            Language
-          </a>
-          <div class="dropdown-menu" aria-labelledby="servicesDropdown">
+    <input type="checkbox" id="nav-toggle" checked />
+    <label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>
+    <a id="nav-home-mobile" class="nav-anchor" href="/index.html">
+      <img src="/assets/img/layout/logo_smaller.png" width="148px" height="22px" />
+    </a>
+
+    <div class="menu">
+
+      <div id="nav-left" class="position-relative flex-col">
+        <a class="nav-anchor" href="/index.html">
+          <span id="nav-home" class="fas fa-home"></span>
+        </a>
+
+        <!-- Provider -->
+        <details class="nav-details">
+          <summary>
+            <span class="nav-summary">
+              Provider
+              <span class="dropdown-toggle"></span>
+            </span>
+          </summary>
+          <span class="nav-dropdown">
+            <a class="dropdown-item" href="/providers/#ukusa"><span class="fab fa-creative-commons-nc fa-fw"></span> Avoid US & UK services</a>
+            <a class="dropdown-item" href="/providers/cloud-storage/"><span class="fas fa-cloud fa-fw"></span> Cloud Storage</a>
+            <a class="dropdown-item" href="/providers/dns/"><span class="fa fa-tasks fa-fw"></span> DNS</a>
+            <a class="dropdown-item" href="/providers/email/"><span class="fas fa-mail-bulk fa-fw"></span> Email</a>
+            <a class="dropdown-item" href="/providers/hosting/"><span class="fas fa-database fa-fw"></span> Hosting</a>
+            <a class="dropdown-item" href="/providers/paste/"><span class="fas fa-paste fa-fw"></span> Pastebins</a>
+            <a class="dropdown-item" href="/providers/search-engines/"><span class="fab fa-searchengin fa-fw"></span> Search Engines</a>
+            <a class="dropdown-item" href="/providers/social-networks/"><span class="fas fa-expand-arrows-alt fa-fw"></span> Social Networks</a>
+            <a class="dropdown-item" href="/providers/social-news-aggregator/"><span class="far fa-newspaper fa-fw"></span> Social News Aggregators</a>
+            <a class="dropdown-item" href="/providers/vpn/"><span class="far fa-eye-slash fa-fw"></span> VPN</a>
+          </span>
+        </details>
+
+        <!-- Browser -->
+        <details class="nav-details">
+          <summary>
+            <span class="nav-summary">
+              Browser
+              <span class="dropdown-toggle"></span>
+            </span>
+          </summary>
+          <span class="nav-dropdown">
+            <a class="dropdown-item" href="/browsers/#browser"><span class="fas fa-check fa-fw"></span> Recommendation</a>
+            <a class="dropdown-item" href="/browsers/#fingerprint"><span class="fas fa-fingerprint fa-fw"></span> Fingerprinting Info</a>
+            <a class="dropdown-item" href="/browsers/#webrtc"><span class="far fa-eye fa-fw"></span> WebRTC IP Leak</a>
+            <a class="dropdown-item" href="/browsers/#addons"><span class="far fa-list-alt fa-fw"></span> Browser Add-ons</a>
+            <a class="dropdown-item" href="/browsers/#about_config"><span class="fas fa-wrench fa-fw"></span> Firefox Tweaks</a>
+          </span>
+        </details>
+
+        <!-- Software -->
+        <details class="nav-details">
+          <summary>
+            <span class="nav-summary">
+              Software
+              <span class="dropdown-toggle"></span>
+            </span>
+          </summary>
+          <span class="nav-dropdown">
+            <a class="dropdown-item" href="/software/calendar-contacts/"><span class="fas fa-calendar fa-fw"></span> Calendar/Contacts Sync Tools</a>
+            <a class="dropdown-item" href="/software/notebooks/"><span class="far fa-sticky-note fa-fw"></span> Digital Notebook</a>
+            <a class="dropdown-item" href="/software/email/#messaging"><span class="fas fa-random fa-fw"></span> Email Alternatives</a>
+            <a class="dropdown-item" href="/software/email/"><span class="fas fa-envelope fa-fw"></span> Email Clients</a>
+            <a class="dropdown-item" href="/software/encryption-tools/"><span class="fas fa-lock fa-fw"></span> File Encryption</a>
+            <a class="dropdown-item" href="/software/file-sharing/"><span class="fas fa-file-export fa-fw"></span> File Sharing</a>
+            <a class="dropdown-item" href="/software/passwords/"><span class="fas fa-user-lock fa-fw"></span> Password Manager</a>
+            <a class="dropdown-item" href="/software/productivity/"><span class="fas fa-briefcase fa-fw"></span> Productivity Tools</a>
+            <a class="dropdown-item" href="/software/real-time-communication/"><span class="fas fa-comments fa-fw"></span> Real-Time Communication</a>
+            <a class="dropdown-item" href="/software/file-sync/"><span class="fas fa-copy fa-fw"></span> Secure File Sync</a>
+            <a class="dropdown-item" href="/software/networks/"><span class="fas fa-user-secret fa-fw"></span> Self-contained Networks</a>
+            <a class="dropdown-item" href="/software/cloud/"><span class="fas fa-hdd fa-fw"></span> Self-Hosted Cloud Server</a>
+          </span>
+        </details>
+
+        <!-- OS -->
+        <details class="nav-details">
+          <summary>
+            <span class="nav-summary">
+              OS
+              <span class="dropdown-toggle"></span>
+            </span>
+          </summary>
+          <span class="nav-dropdown">
+            <a class="dropdown-item" href="/operating-systems/#os"><span class="fas fa-th-large fa-fw"></span> PC OS</a>
+            <a class="dropdown-item" href="/operating-systems/#live_os"><span class="fas fa-compact-disc fa-fw"></span> Live CD OS</a>
+            <a class="dropdown-item" href="/operating-systems/#mobile_os"><span class="fas fa-mobile-alt fa-fw"></span> Mobile OS</a>
+            <a class="dropdown-item" href="/operating-systems/#aaddons"><span class="fas fa-th fa-fw"></span> Android Privacy Add-ons</a>
+            <a class="dropdown-item" href="/operating-systems/#firmware"><span class="fas fa-signal fa-fw"></span> Router Firmware</a>
+            <a class="dropdown-item" href="/operating-systems/#win10"><span class="far fa-thumbs-down fa-fw"></span> Don't use Windows 10</a>
+          </span>
+        </details>
+
+        <a class="nav-anchor" href="/index.html#participate">Participate</a>
+      </div>
+
+      <!-- Language -->
+      <div id="nav-right">
+        <details class="nav-details">
+          <summary>
+            <span class="nav-summary">
+              <span class="fas fa-language text-danger"></span>
+              Language
+              <span class="dropdown-toggle"></span>
+            </span>
+          </summary>
+          <span class="nav-dropdown">
+            <a href="https://privacytools.io/" class="dropdown-item">English</a>
             <a href="https://privacytools.twngo.xyz/" class="dropdown-item">繁體中文</a>
             <a href="https://victorhck.gitlab.io/privacytools-es/" class="dropdown-item">Español</a>
             <a href="https://pl.privacytools.io/" class="dropdown-item">Polski</a>
@@ -88,26 +118,33 @@
             <a href="https://privacytools-it.github.io/" class="dropdown-item">Italiano</a>
             <a href="https://privacytools.ru" class="dropdown-item">Русский</a>
             <a href="https://privacytools.dreads-unlock.fr" class="dropdown-item">Français</a>
-          </div>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="/services/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Services
-          </a>
-          <div class="dropdown-menu" aria-labelledby="servicesDropdown">
-            <a class="dropdown-item" href="https://forum.privacytools.io/"><i class="fab fa-discourse fa-fw"></i> Discourse - Forum</a>
-            <a class="dropdown-item" href="https://git.privacytools.io/"><i class="fab fa-git fa-fw"></i> Gitea - Git-Repository Manager</a>
-            <a class="dropdown-item" href="https://social.privacytools.io/"><i class="fas fa-retweet fa-fw"></i> Mastodon - Social Network</a>
-            <a class="dropdown-item" href="https://chat.privacytools.io/"><i class="fas fa-comment fa-fw"></i> Matrix - Federated Chat</a>
-            <a class="dropdown-item" href="https://bin.privacytools.io/"><i class="fas fa-clipboard fa-fw"></i> PrivateBin - Encrypted Pastebin</a>
-            <a class="dropdown-item" href="https://search.privacytools.io/"><i class="fas fa-search fa-fw"></i> Searx - Privacy Friendly Search</a>
-            <a class="dropdown-item" href="https://write.privacytools.io/"><i class="fas fa-pen-alt fa-fw"></i> Write Freely - Federated Blog</a>
-          </div>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="/donate/">Donate <i class="fas fa-heart text-danger"></i></a>
-        </li>
-      </ul>
+          </span>
+        </details>
+
+        <!-- Services -->
+        <details class="nav-details">
+          <summary>
+            <span class="nav-summary">
+              Services
+              <span class="dropdown-toggle"></span>
+            </span>
+          </summary>
+          <span class="nav-dropdown">
+            <a class="dropdown-item" href="https://forum.privacytools.io/"><span class="fab fa-discourse fa-fw"></span> Discourse - Forum</a>
+            <a class="dropdown-item" href="https://git.privacytools.io/"><span class="fab fa-git fa-fw"></span> Gitea - Git-Repository Manager</a>
+            <a class="dropdown-item" href="https://social.privacytools.io/"><span class="fas fa-retweet fa-fw"></span> Mastodon - Social Network</a>
+            <a class="dropdown-item" href="https://chat.privacytools.io/"><span class="fas fa-comment fa-fw"></span> Matrix - Federated Chat</a>
+            <a class="dropdown-item" href="https://bin.privacytools.io/"><span class="fas fa-clipboard fa-fw"></span> PrivateBin - Encrypted Pastebin</a>
+            <a class="dropdown-item" href="https://search.privacytools.io/"><span class="fas fa-search fa-fw"></span> Searx - Privacy Friendly Search</a>
+            <a class="dropdown-item" href="https://write.privacytools.io/"><span class="fas fa-pen-alt fa-fw"></span> Write Freely - Federated Blog</a>
+          </span>
+        </details>
+
+        <a href="https://blog.privacytools.io/" class="nav-anchor">Blog </a>
+        <a href="/donate/" class="nav-anchor">
+          Donate <span class="fas fa-heart text-danger"></span>
+        </a>
+      </div>
     </div>
-  </div>
-</nav>
+  </nav>
+</div>
diff --git a/_includes/scripts.html b/_includes/scripts.html
index cdc7e515..79e94209 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,18 +1,8 @@
+<script src="/assets/js/main.js?v=1"></script>
 <script src="/assets/js/jquery-3.3.1.min.js?v=4"></script>
 <script src="/assets/js/popper.min.js?v=4"></script>
 <script src="/assets/js/bootstrap.min.js?v=4"></script>
 <script src="/assets/js/sortable.min.js?v=4"></script>
-<script>
-  $(function () {
-    $("[data-toggle='tooltip']").tooltip();
-  });
-
-  $('.navbar a').not(".dropdown-toggle").click(function (e) {
-    if ($(".navbar-toggler").is(":visible")) {
-      $('.navbar-collapse').collapse('toggle');
-    }
-  });
-</script>
 
 <!--
   Matomo is the leading open-source analytics platform:
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 7ccd8321..c2ab51f4 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -182,4 +182,156 @@ footer {
   i {
     margin-right: 1rem;
   }
-}
\ No newline at end of file
+}
+
+/*
+ * Navbar
+ */
+
+#navbar {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1140px;
+  padding: .75rem 3rem;
+  color: rgba(255,255,255,0.5);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+#navbar .menu {
+  position: relative;
+}
+
+.menu {
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav-anchor {
+  display: inline;
+  color: inherit;
+}
+
+.nav-anchor:hover {
+  text-decoration: none;
+}
+
+.nav-anchor:hover,
+.nav-summary:hover,
+.nav-details[open] > summary > .nav-summary {
+  color: rgba(255,255,255,0.8);
+}
+
+.nav-dropdown {
+  color: var(--dark);
+  background-color: var(--light);
+  padding: .5rem 0;
+  margin-top: .5rem;
+  position: absolute;
+  border: 1px solid #dee2e6;
+  border-radius: .25rem;
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+  z-index: 10;
+}
+
+#nav-right > details > .nav-dropdown {
+  right: 0;
+}
+
+.nav-details {
+  display: inline;
+  position: relative;
+}
+
+.nav-details > summary {
+  list-style: none;
+}
+.nav-details > summary::-webkit-details-marker {
+  display: none;
+}
+
+#nav-right > .nav-details,
+#nav-right > .nav-anchor {
+  padding-left: 0.5rem;
+}
+#nav-left > .nav-details,
+#nav-left > .nav-anchor {
+  padding-right: 0.5rem;
+}
+
+input#nav-toggle,
+#nav-toggle-label {
+  display: none;
+}
+
+#nav-home-mobile {
+  display: none;
+}
+
+
+/* Mobile hamburger menu */
+
+@media only screen and (max-width: 992px) {
+  .menu,
+  .nav-details,
+  .nav-anchor {
+    display: block;
+  }
+  .menu {
+    margin-top: 0.5rem;
+  }
+  #nav-home {
+    display: none;
+  }
+  #nav-home-mobile {
+    display: inline;
+  }
+  input#nav-toggle:checked ~ .menu {
+    display: none;
+  }
+  input#nav-toggle + label {
+    display: block;
+    cursor: pointer;
+    margin-top: 0.25rem;
+    float: right;
+  }
+  .nav-dropdown {
+    display: block;
+    position: relative;
+    max-height: 15.75em;
+    overflow-y: auto;
+    left: 0;
+    right: 0;
+  }
+  #nav-right > .nav-details,
+  #nav-right > .nav-anchor,
+  #nav-left > .nav-details,
+  #nav-left > .nav-anchor {
+    padding: 0 0;
+  }
+  #navbar {
+    padding: 1rem 3rem;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  #navbar {
+    padding: 1rem 2rem;
+  }
+}
+
+@media only screen and (max-width: 575px) {
+  #navbar {
+    padding: 1rem 1rem;
+  }
+}
+
+@media only screen and (max-height: 350px) {
+  .nav-dropdown {
+    max-height: 8em;
+  }
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 00000000..1d7c71b4
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,27 @@
+//
+// Navbar dropdowns
+//
+
+const navSections = document.querySelectorAll(".nav-details");
+
+navSections.forEach(navSection => {
+  navSection.addEventListener("toggle", navSectionsToggle);
+});
+document.addEventListener("click", navSectionsClose);
+
+function navSectionsToggle() {
+  // When opening next dropdown, hide previous
+  if (this.open) {
+    navSections.forEach(navSection => {
+      if (navSection != this && navSection.open) navSection.open = !open;
+    });
+  }
+}
+
+function navSectionsClose(event) {
+  // Hide all dropdowns when clicking in different place
+  if (event.target.matches(".nav-summary")) return;
+  navSections.forEach(navSection => {
+    navSection.open = !open;
+  });
+}