diff --git a/bedrock/base/templates/includes/protocol/navigation/index.html b/bedrock/base/templates/includes/protocol/navigation/index.html
index a2cdacbf419..75c20b6d64c 100644
--- a/bedrock/base/templates/includes/protocol/navigation/index.html
+++ b/bedrock/base/templates/includes/protocol/navigation/index.html
@@ -4,7 +4,7 @@
 
 {% from "macros.html" import fxa_link_fragment with context %}
 
-<div class="mzp-c-navigation">
+<div class="mzp-c-navigation top-header-navigation">
   <div class="mzp-c-navigation-l-content">
     <div class="mzp-c-navigation-container">
       <button class="mzp-c-navigation-menu-button" type="button" aria-controls="mzp-c-navigation-items">{{ _('Menu') }}</button>
diff --git a/bedrock/base/templates/includes/sub-nav.html b/bedrock/base/templates/includes/sub-nav.html
index 205530002d7..26cb1615b76 100644
--- a/bedrock/base/templates/includes/sub-nav.html
+++ b/bedrock/base/templates/includes/sub-nav.html
@@ -3,7 +3,7 @@
  # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
 
 {# hidden for screens smaller than 880px wide #}
-<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %}" role="navigation">
+<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %} is-js-dependent" role="navigation">
   <div class="nav-horizontal-menu-container">
     <div class="nav-horizontal-menu">
       <div class="sub-nav-primary-links-container">
diff --git a/bedrock/firefox/templates/firefox/accounts-2019.html b/bedrock/firefox/templates/firefox/accounts-2019.html
index e43093ea3fa..b9940609b35 100644
--- a/bedrock/firefox/templates/firefox/accounts-2019.html
+++ b/bedrock/firefox/templates/firefox/accounts-2019.html
@@ -56,7 +56,7 @@ <h1 class="c-accounts-hero-title">{{ _('There is a way to protect your privacy.
     </div>
 
     {% if has_signed_in_copy %}
-    <div class="c-accounts-hero-body c-accounts-hero-body-signed-in">
+    <div class="c-accounts-hero-body c-accounts-hero-body-signed-in is-js-dependent">
       {# L10n: the span here is to display the phrase "Now try Firefox Monitor." in a different color. Line breaks are for visual formatting. #}
       <h2 class="c-accounts-hero-title">{{ _('You’re signed <br>in to Firefox. <br><span>Now try Firefox Monitor.</span>') }}</h2>
 
diff --git a/bedrock/mozorg/templates/mozorg/home/home-en.html b/bedrock/mozorg/templates/mozorg/home/home-en.html
index 2e8f48e9e56..5e217dff87e 100644
--- a/bedrock/mozorg/templates/mozorg/home/home-en.html
+++ b/bedrock/mozorg/templates/mozorg/home/home-en.html
@@ -48,7 +48,7 @@
 {% block content %}
 {% block main %}
 <main>
-  <header class="main-page-heading">
+  <header class="main-page-heading visually-hidden">
     {# Main page h1 is hidden from view and exists mainly for SEO purposes #}
     <h1>{{ self.page_title() }}</h1>
   </header>
@@ -197,7 +197,7 @@ <h3 class="section-heading">{{ _('What we’re reading:') }}</h3>
   {% call call_out_compact(
     title=_('The account that protects you rather than profits off you.'),
     desc=None,
-    class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
+    class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark is-js-dependent',
     heading_level=2
   ) %}
     <a href="{{ url('firefox.accounts') }}" class="mzp-c-button mzp-t-secondary mzp-t-dark" id="fxa-learn-secondary">{{ _('Learn More') }}</a>
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/macros.html b/bedrock/mozorg/templates/mozorg/home/includes/macros.html
index 4424df20e93..81c7f57389a 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/macros.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/macros.html
@@ -19,7 +19,7 @@ <h3 class="c-primary-cta-title-sub">{{ sub_title }}</h3>
 {%- endmacro %}
 
 {% macro download_banner_sticky(title, sub_title, desc) -%}
-<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox">
+<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox is-js-dependent">
   <div class="mzp-l-content">
     <div class="c-sticky-cta-wrapper">
       <h2 class="c-sticky-cta-title">{{ title }}</h2>
@@ -50,7 +50,7 @@ <h2 class="c-secondary-cta-title">{{ title }}</h2>
 {%- endmacro %}
 
 {% macro fxa_banner(logo_title, title, sub_title, link_cta) -%}
-<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox">
+<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox is-js-dependent">
   <div class="mzp-l-content">
     <div class="c-primary-cta-wrapper">
       <h2 class="c-primary-cta-logo">{{ logo_title }}</h2>
@@ -67,7 +67,7 @@ <h4 class="c-primary-cta-title-sub">{{ sub_title }}</h4>
 {%- endmacro %}
 
 {% macro fxa_banner_sticky(title, sub_title, link_cta) -%}
-<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox">
+<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox is-js-dependent">
   <div class="mzp-l-content">
     <div class="c-sticky-cta-wrapper">
       <h2 class="c-sticky-cta-title">{{ title }}</h2>
diff --git a/media/css/pebbles/base/oldIE.scss b/media/css/pebbles/base/oldIE.scss
index 7eb451343b1..d2613d20c7c 100644
--- a/media/css/pebbles/base/oldIE.scss
+++ b/media/css/pebbles/base/oldIE.scss
@@ -5,11 +5,21 @@
 // This style sheet is served exclusively to Internet Explorer 8 and older.
 // Old versions get this minimal style while IE9 and up recieve more advanced styling.
 
-@import
-    '../includes/lib',
-    'elements',
-    '../components/buttons',
-    '../components/buttons-download';
+@import '../includes/lib';
+@import 'elements';
+@import '../components/buttons';
+@import '../components/buttons-download';
+@import '../../protocol/components/navigation-ie';
+@import '../../protocol/components/navigation';
+@import '../../../protocol/css/base/elements/sections';
+
+.content {
+    @include border-box;
+    margin: 0 auto;
+    padding: 20px 0;
+    min-width: $width-phone;
+    max-width: $width-desktop-wide;
+}
 
 // An arbitrary container for translatable strings to use in scripts
 #strings {
@@ -32,25 +42,43 @@ label {
     display: block;
 }
 
-.masthead .toggle {
-    display: none; /* oldIE never gets a mobile menu. */
+.visually-hidden {
+    @include visually-hidden;
 }
 
-/* oldIE never gets slide out drawer */
-.moz-global-nav {
-    .nav-button-menu {
-        display: none;
-    }
+.hidden {
+    @include hidden;
 }
 
-.moz-global-nav-drawer {
+.is-js-dependent {
     display: none;
 }
 
-.visually-hidden {
-    @include visually-hidden;
-}
+/**
+ * Pebbles specific overrides for download button in main navigation.
+ */
+ .mzp-c-navigation-download {
+    .download-button {
+        .download-link {
+            background-color: transparent;
+            background-image: none;
+            border-radius: 2px;
+            color: #12bc00;
+            border: 2px solid #12bc00;
+            box-shadow: none;
+            line-height: 1.125;
+            padding: $spacing-sm $spacing-md;
 
-.hidden {
-    @include hidden;
+            &:hover,
+            &:focus {
+                background-color: #12bc00;
+                border-color: #12bc00;
+                color: $color-white;
+            }
+        }
+
+        .fx-privacy-link {
+            display: none;
+        }
+    }
 }
diff --git a/media/css/protocol/components/_navigation-ie.scss b/media/css/protocol/components/_navigation-ie.scss
new file mode 100644
index 00000000000..a1362cd0cc2
--- /dev/null
+++ b/media/css/protocol/components/_navigation-ie.scss
@@ -0,0 +1,154 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
+@import '../../../protocol/css/includes/lib';
+
+/* -------------------------------------------------------------------------- */
+// Navigation styles
+
+.top-header-navigation {
+    background: $color-white;
+    color: $color-black;
+    margin-bottom: $layout-lg;
+
+    .mzp-c-navigation-l-content {
+        padding: $layout-xs;
+    }
+
+    .mzp-c-navigation-container {
+        @include clearfix;
+        margin: 0 auto;
+        max-width: $content-max;
+        position: relative;
+    }
+
+    // Mozilla Logo
+    .mzp-c-navigation-logo {
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 112px;
+
+        a {
+            @include image-replaced;
+            background-image: url('/media/img/nav/logo-black.png');
+            background-repeat: no-repeat;
+            display: block;
+            height: 32px;
+            margin: 0 auto;
+            width: 112px;
+        }
+    }
+
+    // Download button
+    .mzp-c-navigation-download {
+        display: inline-block;
+        *display: inline;
+        margin: 0;
+        position: absolute;
+        right: 0;
+        text-align: center;
+        top: 0;
+        zoom: 1;
+
+        .mzp-c-button-download-container {
+            display: inline-block;
+            *display: inline;
+            margin-bottom: 0;
+            zoom: 1;
+
+            // hide privacy link
+            .mzp-c-button-download-privacy-link {
+                display: none;
+            }
+        }
+
+        // hide FxA button
+        .c-navigation-fxa-cta-container {
+            display: none;
+        }
+    }
+
+    // Nav buttom
+    .mzp-c-navigation-menu-button {
+        @include image-replaced;
+        background-color: transparent;
+        background-image: url('/media/img/nav/menu.png');
+        background-position-x: center;
+        background-position-y: center;
+        background-repeat: no-repeat;
+        border-radius: 4px;
+        border: none;
+        display: none;
+        height: 32px;
+        left: 120px;
+        padding: 1px 2px;
+        position: absolute;
+        top: 0;
+        width: 28px;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &.mzp-is-active  {
+            background-color: $color-gray-20;
+        }
+    }
+
+    .mzp-c-navigation-items {
+        margin-top: $layout-xs;
+    }
+
+    // hide panel close buttons
+    .mzp-c-menu-button-close {
+        display: none;
+    }
+
+    .mzp-c-menu-title {
+        display: inline-block;
+        *display: inline;
+        font-weight: bold;
+        margin-bottom: $spacing-xl;
+        zoom: 1;
+    }
+
+    .mzp-c-menu-category {
+        margin-bottom: $spacing-2xl;
+    }
+
+    // hide cards
+    .mzp-c-menu-panel-card {
+        display: none;
+    }
+
+    .mzp-c-navigation-menu {
+        display: none;
+        position: relative;
+        top: $layout-lg;
+
+        ul {
+            list-style-type: none;
+            margin: 0 0 $spacing-lg;
+            padding: 0;
+
+            li {
+                margin: 0;
+                padding: 0;
+            }
+        }
+
+        .mzp-c-menu-panel {
+            padding-left: $spacing-xl;
+        }
+    }
+}
+
+.js .top-header-navigation {
+    .mzp-c-navigation-menu-button {
+        display: block;
+    }
+}
diff --git a/media/css/protocol/oldIE.scss b/media/css/protocol/oldIE.scss
index 45a17918769..7d3cdb02a34 100644
--- a/media/css/protocol/oldIE.scss
+++ b/media/css/protocol/oldIE.scss
@@ -5,10 +5,15 @@
 // This style sheet is served exclusively to Internet Explorer 8 and older.
 // Old versions get this minimal style while IE9 and up recieve more advanced styling.
 
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
 @import '../../protocol/css/includes/lib';
 @import '../../protocol/css/base/elements';
 @import '../../protocol/css/components/button';
 
+@import 'components/navigation-ie';
+@import 'components/navigation';
 @import 'components/download-button';
 
 // An arbitrary container for translatable strings to use in scripts
@@ -32,21 +37,6 @@ label {
     display: block;
 }
 
-.masthead .toggle {
-    display: none; /* oldIE never gets a mobile menu. */
-}
-
-/* oldIE never gets slide out drawer */
-.moz-global-nav {
-    .nav-button-menu {
-        display: none;
-    }
-}
-
-.moz-global-nav-drawer {
-    display: none;
-}
-
 .visually-hidden {
     @include visually-hidden;
 }
@@ -55,8 +45,16 @@ label {
     @include hidden;
 }
 
-// Make sure form details are visible
+.is-js-dependent {
+    display: none;
+}
+
+/* Make sure form details are visible */
 /* stylelint-disable declaration-no-important  */
 .js .mzp-c-newsletter-details {
     display: block !important;
 }
+
+.mzp-c-newsletter-thanks {
+    display: none;
+}
diff --git a/media/css/sandstone/old-ie.scss b/media/css/sandstone/old-ie.scss
new file mode 100644
index 00000000000..9876e48013b
--- /dev/null
+++ b/media/css/sandstone/old-ie.scss
@@ -0,0 +1,43 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
+@import '../protocol/components/navigation-ie';
+@import '../protocol/components/navigation';
+@import '../../protocol/css/base/elements/sections';
+
+/**
+ * Sandstone specific overrides for download button in main navigation.
+ */
+.mzp-c-navigation-download {
+    .download-button {
+        .download-link {
+            background-color: transparent;
+            background-image: none;
+            border-radius: 2px;
+            color: #12bc00;
+            border: 2px solid #12bc00;
+            box-shadow: none;
+            line-height: 1.125;
+            padding: $spacing-sm $spacing-md;
+
+            &:hover,
+            &:focus {
+                background-color: #12bc00;
+                border-color: #12bc00;
+                color: $color-white;
+            }
+        }
+
+        .fx-privacy-link {
+            display: none;
+        }
+    }
+}
+
+.is-js-dependent {
+    display: none;
+}
diff --git a/media/img/nav/logo-black.png b/media/img/nav/logo-black.png
new file mode 100755
index 00000000000..4a188859b51
Binary files /dev/null and b/media/img/nav/logo-black.png differ
diff --git a/media/img/nav/menu.png b/media/img/nav/menu.png
new file mode 100755
index 00000000000..08fc5e5f603
Binary files /dev/null and b/media/img/nav/menu.png differ
diff --git a/media/js/ie8/base-page-init-ie8.js b/media/js/ie8/base-page-init-ie8.js
index 9d12512a638..587d9cf5139 100644
--- a/media/js/ie8/base-page-init-ie8.js
+++ b/media/js/ie8/base-page-init-ie8.js
@@ -8,9 +8,11 @@
 $(document).ready(function() {
     'use strict';
 
-    var utilsie8 = Mozilla.UtilsIE8;
+    // Initialize download buttons.
+    Mozilla.UtilsIE8.initDownloadLinks();
 
-    utilsie8.initDownloadLinks();
+    // Initialize navigation.
+    Mozilla.UtilsIE8.initNavigation();
 
     $(window).on('load', function() {
         $('html').addClass('loaded');
diff --git a/media/js/ie8/mozilla-utils-ie8.js b/media/js/ie8/mozilla-utils-ie8.js
index e967fdc39ce..cea47e5be1f 100644
--- a/media/js/ie8/mozilla-utils-ie8.js
+++ b/media/js/ie8/mozilla-utils-ie8.js
@@ -39,6 +39,15 @@ if (typeof window.Mozilla === 'undefined') {
         $('.download-list').attr('role', 'presentation');
     };
 
+    UtilsIE8.initNavigation = function() {
+        $('.mzp-c-navigation-menu-button').on('click', function(e) {
+            e.preventDefault();
+            var $menuButton = $(e.target);
+            var $menu = $('#' + $menuButton.attr('aria-controls'));
+            $menu.find('.mzp-c-navigation-menu').toggle();
+        });
+    };
+
     window.Mozilla.UtilsIE8 = UtilsIE8;
 
 })();
diff --git a/media/static-bundles.json b/media/static-bundles.json
index 2b55c5de78e..4d950f88a6f 100644
--- a/media/static-bundles.json
+++ b/media/static-bundles.json
@@ -38,7 +38,8 @@
     },
     {
       "files": [
-        "css/sandstone/oldIE.less"
+        "css/sandstone/oldIE.less",
+        "css/sandstone/old-ie.scss"
       ],
       "name": "oldIE"
     },