diff --git a/layout/_partials/header/brand.njk b/layout/_partials/header/brand.njk
index a32aaaf..7090fc1 100644
--- a/layout/_partials/header/brand.njk
+++ b/layout/_partials/header/brand.njk
@@ -1,10 +1,8 @@
 <div class="site-brand-container">
-  <div class="site-nav-search">
-    <div class="toggle popup-trigger" aria-label="{{ __('menu.search') }}" role="button">
-      {%- if theme.algolia_search.enable or theme.local_search.enable %}
-        <i class="fa fa-search fa-fw fa-lg"></i>
-      {%- endif %}
-    </div>
+  <div class="site-nav-search popup-trigger" aria-label="{{ __('menu.search') }}" role="button">
+    {%- if theme.algolia_search.enable or theme.local_search.enable %}
+      <i class="fa fa-search fa-fw fa-lg"></i>
+    {%- endif %}
   </div>
 
   <div class="site-meta">
@@ -25,11 +23,9 @@
     {%- endif %}
   </div>
 
-  <div class="site-nav-toggle">
-    <div class="toggle" aria-label="{{ __('accessibility.nav_toggle') }}" role="button">
-      {%- if theme.menu %}
-        <i class="fa fa-ellipsis fa-fw fa-lg"></i>
-      {%- endif %}
-    </div>
+  <div class="site-nav-toggle" aria-label="{{ __('accessibility.nav_toggle') }}" role="button">
+    {%- if theme.menu %}
+      <i class="fa fa-ellipsis fa-fw fa-lg"></i>
+    {%- endif %}
   </div>
 </div>
diff --git a/source/css/_common/outline/header/index.styl b/source/css/_common/outline/header/index.styl
index 6ff3084..dfeb7d5 100644
--- a/source/css/_common/outline/header/index.styl
+++ b/source/css/_common/outline/header/index.styl
@@ -12,11 +12,10 @@
 .site-brand-container {
   display: flex;
   flex-shrink: 0;
-  padding: 0 10px;
 }
 
 .use-motion {
-  .column, .site-brand-container .toggle {
+  .column {
     opacity: 0;
   }
 }
diff --git a/source/css/_common/outline/header/site-nav.styl b/source/css/_common/outline/header/site-nav.styl
index ebd0430..af0e24a 100644
--- a/source/css/_common/outline/header/site-nav.styl
+++ b/source/css/_common/outline/header/site-nav.styl
@@ -1,13 +1,19 @@
 .site-nav-toggle, .site-nav-search {
+  color: var(--text-color);
   display: none;
+  padding: 0 10px;
+
+  .fa {
+    transition: transform .5s;
+  }
 
   +mobile() {
     flex-column();
   }
+}
 
-  .toggle {
-    color: var(--text-color);
-  }
+.site-nav-on .site-nav-toggle .fa {
+  transform: rotate(-90deg);
 }
 
 .site-nav {
diff --git a/source/css/_schemes/Pisces/_header.styl b/source/css/_schemes/Pisces/_header.styl
index 3e70c47..5606b5a 100644
--- a/source/css/_schemes/Pisces/_header.styl
+++ b/source/css/_schemes/Pisces/_header.styl
@@ -21,11 +21,9 @@
 }
 
 .site-nav-toggle, .site-nav-search {
+  color: white;
+
   +tablet() {
     flex-column();
   }
-
-  .toggle {
-    color: white;
-  }
 }
diff --git a/source/css/noscript.styl b/source/css/noscript.styl
index 8891cf4..f7b39f5 100644
--- a/source/css/noscript.styl
+++ b/source/css/noscript.styl
@@ -15,7 +15,6 @@ body { margin-top: 2rem; }
 }
 
 .use-motion .column,
-.use-motion .site-brand-container .toggle,
 .use-motion .footer { opacity: initial; }
 
 .use-motion .site-title,
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
index 4379cce..718e0a0 100644
--- a/source/js/next-boot.js
+++ b/source/js/next-boot.js
@@ -9,8 +9,7 @@ NexT.boot.registerEvents = function() {
     NexT.utils.updateFooterPosition();
 
     // Mobile top menu bar.
-    document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {
-      event.currentTarget.classList.toggle('toggle-close');
+    document.querySelector('.site-nav-toggle').addEventListener('click', event => {
       const siteNav = document.querySelector('.site-nav');
       if (!siteNav) return;
       siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px');