diff --git a/apps/firefox/templates/firefox/base-resp.html b/apps/firefox/templates/firefox/base-resp.html
index c87c6b026a8..2564d2eff0d 100644
--- a/apps/firefox/templates/firefox/base-resp.html
+++ b/apps/firefox/templates/firefox/base-resp.html
@@ -17,10 +17,11 @@
 {% endblock %}
 
 {% block site_header_nav %}
-<nav role="navigation" id="nav-main">
-  <ul role="menubar">
+<nav id="nav-main" role="navigation">
+  <span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
+  <ul id="nav-main-menu" role="menubar">
     <li class="first" id="nav-main-features"><a href="/en-US/firefox/features/" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">Desktop</a>
-      <ul aria-expanded="false" id="nav-main-features-submenu">
+      <ul aria-expanded="false" id="nav-main-features-submenu" class="submenu">
         <li class="first"><a href="{{ url('firefox.features') }}" tabindex="-1">Features</a></li>
         <li><a href="{{ url('firefox.customize') }}" tabindex="-1">Customize</a></li>
         <li><a href="{{ url('firefox.performance') }}" tabindex="-1">Performance</a></li>
@@ -29,15 +30,15 @@
       </ul>
     </li>
     <li id="nav-main-mobile"><a href="/en-US/mobile/" tabindex="0" aria-owns="nav-main-mobile-submenu" aria-haspopup="true">Mobile</a>
-      <ul aria-expanded="false" id="nav-main-mobile-submenu">
-        <li class="first"><a href="/en-US/mobile/" tabindex="-1">Download</a></li>
+      <ul aria-expanded="false" id="nav-main-mobile-submenu" class="submenu">
+        <li class="first"><a href="/en-US/mobile/" tabindex="-1">Overview</a></li>
         <li><a href="/en-US/mobile/features/" tabindex="-1">Features</a></li>
         <li><a href="https://addons.mozilla.org/en-US/mobile/?browse=featured" tabindex="-1">Customize</a></li>
         <li class="last"><a href="/en-US/mobile/faq/" tabindex="-1">FAQ</a></li>
       </ul>
     </li>
     <li id="nav-main-releases" class=""><a href="/en-US/firefox/channel/" tabindex="0" aria-owns="nav-main-releases-submenu" aria-haspopup="true">Releases</a>
-      <ul aria-expanded="false" id="nav-main-releases-submenu">
+      <ul aria-expanded="false" id="nav-main-releases-submenu" class="submenu">
         <li class="first"><a href="/en-US/firefox/channel/" tabindex="-1">Overview</a></li>
         <li><a href="/en-US/firefox/aurora/" tabindex="-1">Firefox Aurora</a></li>
         <li><a href="/beta/" tabindex="-1">Firefox Beta</a></li>
@@ -46,20 +47,20 @@
       </ul>
     </li>
     <li id="nav-main-addons"><a href="https://addons.mozilla.org/" tabindex="0" aria-owns="nav-main-addons-submenu" aria-haspopup="true">Add-ons</a>
-      <ul aria-expanded="false" id="nav-main-addons-submenu">
+      <ul aria-expanded="false" id="nav-main-addons-submenu" class="submenu">
         <li class="first"><a href="https://addons.mozilla.org/firefox/" tabindex="-1">Desktop Add-ons</a></li>
         <li><a href="https://addons.mozilla.org/mobile/" tabindex="-1">Mobile Add-ons</a></li>
         <li class="last"><a href="http://www.getpersonas.com/" tabindex="-1">Personas</a></li>
       </ul>
       </li>
       <li id="nav-main-support"><a href="http://support.mozilla.org/" tabindex="0" aria-owns="nav-main-support-submenu" aria-haspopup="true">Support</a>
-      <ul aria-expanded="false" id="nav-main-support-submenu">
+      <ul aria-expanded="false" id="nav-main-support-submenu" class="submenu">
         <li class="first"><a href="http://support.mozilla.org/en-US/kb/" tabindex="-1">Desktop Support</a></li>
         <li class="last"><a href="http://support.mozilla.org/mobile" tabindex="-1">Mobile Support</a></li>
       </ul>
     </li>
     <li class="last" id="nav-main-about"><a href="/en-US/firefox/about/" tabindex="0" aria-owns="nav-main-about-submenu" aria-haspopup="true">About</a>
-      <ul aria-expanded="false" id="nav-main-about-submenu">
+      <ul aria-expanded="false" id="nav-main-about-submenu" class="submenu">
         <li class="first"><a href="http://blog.mozilla.com/" tabindex="-1">Blog</a></li>
         <li><a href="/en-US/firefox/about/" tabindex="-1">About Firefox</a></li>
         <li><a href="http://www.mozilla.org/join" tabindex="-1">Join Mozilla</a></li>
@@ -80,7 +81,7 @@ <h2><img src="{{ media('img/firefox/template/header-logo.png') }}" alt="Mozilla
 {% endblock %}
 
 {% block site_js %}
-  {{ js('firefox') }}
+  {{ js('firefox-resp') }}
 {% endblock %}
 
 {% block webtrends %}
diff --git a/media/css/firefox/menu-resp.less b/media/css/firefox/menu-resp.less
new file mode 100644
index 00000000000..57728c0de6b
--- /dev/null
+++ b/media/css/firefox/menu-resp.less
@@ -0,0 +1,178 @@
+/* Top Level Menu Items */
+
+#nav-main-menu {
+    .inline-block;
+    margin: 0;
+
+    li {
+        position: relative;
+
+        &.hover a {
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHAQMAAADpvlVZAAAAAXNSR0IArs4c6QAAAAZQTFRFAAAA////pdmf3QAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AMBEjcKOURVdQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAdSURBVAjXY2BiYGBnYOBvYJA/wGD/gKH+A8P/HwAiJAX9mUp9sAAAAABJRU5ErkJggg==);
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            outline: 0;
+        }
+    }
+
+}
+
+/* Second-level Menu Items */
+
+.js #nav-main li.hover .submenu {
+    left: 0;
+    opacity: 1;
+    -moz-transition: opacity 0.2s ease-in-out;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
+}
+
+#nav-main .submenu,
+#nav-main .submenu li {
+    height: auto;
+    border: 0;
+    float: none;
+    display: block;
+}
+
+#nav-main .submenu {
+    position: absolute;
+    z-index: 100;
+    left: -999em;
+    top: 43px;
+    opacity: 0;
+    width: 190px;
+    text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
+    background: #fff;
+    padding: 1px 0;
+    border-bottom: 1px solid #ddd;
+
+    li,
+    li.hover {
+        background-image: none;
+
+        a,
+        a:link,
+        a:visited,
+        span {
+            overflow: hidden;
+            padding: 7px 10px;
+            margin: 0;
+            height: auto;
+            float: none;
+            display: block;
+            font-size: 11px;
+            border: 0;
+            background: none;
+            position: relative;
+            -moz-transition: background 0.1s ease-in;
+            -webkit-transition: background 0.1s ease-in;
+            transition: background 0.1s ease-in;
+        }
+
+        a,
+        a:hover,
+        a:focus,
+        a:active {
+            background-image: none;
+            background: rgb(227,235,244);
+            background: rgba(152,178,201,0.2);
+            -moz-transition: background 0.1s ease-out;
+            -webkit-transition: background 0.1s ease-out;
+            transition: background 0.1s ease-out;
+        }
+    }
+
+}
+/* Currently active menu items */
+
+#nav-mail ul li.current {
+    span,
+    a,
+    a:link,
+    a:visited {
+        background: #fbfdff;
+        padding-right: 30px;
+        padding-bottom: 15px;
+    }
+
+    ul span,
+    ul a,
+    ul a:link,
+    ul a:visited {
+        background: none;
+        height: auto;
+        padding: 8px 10px;
+    }
+}
+
+/* {{{ Dark Background Header */
+
+.darkbg #nav-main ul li {
+
+    a,
+    a:link,
+    a:visited,
+    span {
+        color: #fff;
+        border-color: #555;
+    }
+
+    li a,
+    li a:link,
+    li a:visited,
+    li span {
+        color: #484848;
+    }
+
+    a:hover,
+    &:hover a,
+    .hover a,
+    .hover a:link,
+    .hover a:visited {
+        background: #ccc;
+        color: #484848;
+    }
+
+}
+
+/* }}} */
+
+/* Mobile Layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    #nav-main-menu {
+        margin: 15px 0 0 -10px;
+
+        li.hover a {
+            background-image: none;
+        }
+
+    }
+
+    #nav-main-menu .submenu,
+    .js #nav-main li.hover .submenu {
+        left: -999em;
+        margin-top: -8px;
+        background: #fff;
+        .border-radius(10px);
+        .box-shadow(0 2px 3px rgba(0,0,0,.35));
+        opacity: 1;
+        padding: 0;
+    }
+
+    .js #nav-main li .submenu {
+        xleft: 80px;
+        xtop: 0px;
+    }
+
+    #nav-main-menu .submenu a,
+    #nav-main-menu .submenu a:link,
+    #nav-main-menu .submenu a:visited {
+        -moz-transition: none 0s;
+        -webkit-transition: none 0s;
+        transition: none 0s;
+    }
+
+}
+
diff --git a/media/css/firefox/menu.less b/media/css/firefox/menu.less
index d88fcf3cba9..7ce3f1cfd8d 100644
--- a/media/css/firefox/menu.less
+++ b/media/css/firefox/menu.less
@@ -1,6 +1,6 @@
 /* Top Level Menu Items */
 
-#nav-main ul {
+#nav-main-menu {
     .inline-block;
     margin: 0;
 
@@ -12,8 +12,8 @@
         a:link,
         a:visited,
         span {
-           z-index: 100;
-           position: relative;
+            z-index: 100;
+            position: relative;
         }
 
         &.hover a {
@@ -28,7 +28,7 @@
 
 /* Second-level Menu Items */
 
-.js #nav-main li.hover ul {
+.js #nav-main li.hover .submenu {
     left: 0;
     opacity: 1;
     -moz-transition: opacity 0.2s ease-in-out;
@@ -36,20 +36,19 @@
     transition: opacity 0.2s ease-in-out;
 }
 
-#nav-main li ul,
-#nav-main li ul li {
+#nav-main .submenu,
+#nav-main .submenu li {
     height: auto;
     border: 0;
     float: none;
     display: block;
 }
 
-#nav-main li ul {
+#nav-main .submenu {
     position: absolute;
     left: -999em;
-    top: 48px;
+    top: 44px;
     opacity: 0;
-    z-index: 999;
     width: 190px;
     text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
     background: #fff;
@@ -59,6 +58,7 @@
     li,
     li.hover {
         background-image: none;
+        z-index: 120;
 
         a,
         a:link,
@@ -146,3 +146,52 @@
 
 }
 
+/* Mobile Layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+    
+    #nav-main-menu {
+        margin: 15px 0 0 -10px;
+
+        li {
+//            z-index: 100;
+    
+            a,
+            a:link,
+            a:visited,
+            span {
+//               z-index: 100;
+            }
+    
+            &.hover a {
+                background-image: none;
+            }
+        }
+
+    }
+
+    #nav-main-menu .submenu,
+    .js #nav-main li.hover .submenu {
+        z-index: 120;
+        left: 60px;
+        top: auto;
+        margin-top: -5px;
+        display: none;
+        background: #fff;
+        border-radius: 10px;
+        box-shadow: 0 2px 3px rgba(0,0,0,.35);
+        opacity: 1;
+        padding: 0;
+    }
+    
+    #nav-main-menu .submenu a,
+    #nav-main-menu .submenu a:link,
+    #nav-main-menu .submenu a:visited {
+        z-index: 130;
+        -moz-transition: none 0s;
+        -webkit-transition: none 0s;
+        transition: none 0s;
+    }
+
+    
+}
+
diff --git a/media/css/firefox/template-resp.less b/media/css/firefox/template-resp.less
index 965d8de359c..ee8888f045d 100644
--- a/media/css/firefox/template-resp.less
+++ b/media/css/firefox/template-resp.less
@@ -1,5 +1,5 @@
 @import "../sandstone/sandstone-resp.less";
-@import "menu.less";
+@import "menu-resp.less";
 
 #masthead h1 {
     padding: @baseLine 0;
diff --git a/media/css/sandstone/sandstone-resp.less b/media/css/sandstone/sandstone-resp.less
index 2eabd2f6d03..48b211ab01b 100644
--- a/media/css/sandstone/sandstone-resp.less
+++ b/media/css/sandstone/sandstone-resp.less
@@ -359,6 +359,10 @@ input[type=text]:focus {
 
 }
 
+#nav-main .toggle {
+    display: none; /* Hidden in non-mobile views */
+}
+
 
 /* }}} */
 /* {{{ Header Breadcrumbs */
@@ -712,7 +716,6 @@ nav.menu-bar {
 
 
     #masthead {
-
         h2 {
             padding-top: @baseLine / 2;
             padding-bottom: @baseLine / 2;
@@ -720,7 +723,8 @@ nav.menu-bar {
 
         nav {
             float: none;
-            padding-top: @baseLine / 2;
+            padding-top: 10px;
+            margin-left: 10px;
 
             ul li {
                 display: block;
@@ -833,9 +837,115 @@ nav.menu-bar {
             margin-bottom: @baseLine;
         }
     }
+    
+    #nav-main {
+        .toggle {
+            display: block;
+            width: 28px;
+            height: 28px;
+            background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAABU0lEQVRIx82Wz0rDQBCHd5MhwUshDZFCscSUSHLKoVCt+NaC+AAiXpNLCoEeAr0Y0oMgMf87g/QBatnBhT3sYfnYmd9+u9J13dfpdPqk6/ooFI6+7+XhcHiDxWKxCYLgmwO43W43MJlMBtu2OymlSp4Yx1EQCzRNG2kKxYMORBwgOC6UA08HBaytGIZBcPSQWICwNMuyO8MwlAKbppHEktjMe1xfM5X0k4Bn7fB9/88ppdbBuRvrur4srZ7nveA9fOQITVmW74BqW4dh+IWhGRSHRkvTdE2m6WazWc1hmv1+bwCVUnU5T4M4QJbBOXAAiQVt27KZhljQdV2GzbzlCA2x/r9p8LHmNU1VVZcFZ7lcPjuO88ARmqIoPgDVtoqiqOR4nuI4XoFlWe18Pv/hME2e51f8f5rxN6YsaiMWXXzJZRpiEXCXJMmNaZpKgfhwE3B3BGJ212JCzaPDAAAAAElFTkSuQmCC);
+            text-indent: -999em;
+            overflow: hidden;
+            cursor: pointer;
+        }
+    
+        #nav-main-menu li {
+            display: block;
+            float: none;
+            margin: 0 10px;
+            border-bottom: 1px solid #f2f2f2;
+        }
+        
+        #nav-main-menu li:last-child {
+            border: 0;
+        }
+        
+        #nav-main-menu a {
+            cursor: pointer;
+            display: block;
+            text-transform: none;
+            padding: 12px 35px 12px 10px;
+            margin: 0 -10px;
+        }
 
+        #nav-main-menu a.submenu-item {
+            background: 94% 50% no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=);
+        }
+        
+        #nav-main-menu a:hover,
+        #nav-main-menu a:focus,
+        #nav-main-menu a:active {
+            color: #fff;
+            text-decoration: none;
+            text-shadow: 1px 1px 0 rgba(0,0,0,.25);
+            background-color: #247ac1;
+            background-position: 94% 50%;
+            background-repeat: no-repeat;
+            background-image: -moz-linear-gradient(#43a6e2, #247ac1);
+            background-image: -ms-linear-gradient(#43a6e2, #247ac1);
+            background-image: -o-linear-gradient(#43a6e2, #247ac1);
+            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a6e2), color-stop(100%,#247ac1));
+            background-image: -webkit-linear-gradient(#43a6e2, #247ac1);
+            background-image: linear-gradient(#43a6e2, #247ac1);
+        }
+        
+        #nav-main-menu a.submenu-item:hover,
+        #nav-main-menu a.submenu-item:focus,
+        #nav-main-menu a.submenu-item:active {
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -moz-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -ms-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -o-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a6e2), color-stop(100%,#247ac1));
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -webkit-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), linear-gradient(#43a6e2, #247ac1);
+        }
+        
+        #nav-main-menu li.first > a {
+            border-radius: 10px 10px 0 0;
+        }
+
+        #nav-main-menu li.last > a {
+            border-radius: 0 0 10px 10px;
+        }        
+    }
+    
+    #nav-main-menu {
+        background: #fff;
+        position: absolute;
+        z-index: 99;
+        width: 200px;
+        margin: 15px 0 0 -10px;
+        left: -999em;
+        top: 35px;
+        overflow: visible;
+        .border-radius(10px);
+        .box-shadow(0 1px 3px 0 rgba(0,0,0,.5));
+    }
+        
+    #nav-main:hover #nav-main-menu,
+    #nav-main-menu:target { 
+        left: auto; 
+    }
+    
+    .js #nav-main-menu { 
+        left: auto; 
+        display: none;
+    }
+        
+    #nav-main-menu:before {
+        content: "";
+        display: block;
+        width: 28px;
+        height: 10px;
+        background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAOCAYAAADez2d9AAAASElEQVR42r3NSQoAMAgEQf//6Q7klICIe4HehhZg7e6LIj7KxXiMxlCMxDC0xnBoiRFQipGQilEQitHAFaORGWOAGmPQF2OHHKIJP+tDsbI5AAAAAElFTkSuQmCC);
+        position: absolute;
+        left: 10px;
+        top: -10px;
+    }
+    
 }
 
+
 /* Wide Mobile Layout: 480px */
 @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
 
@@ -861,7 +971,7 @@ nav.menu-bar {
 
     #colophon {
         .row {
-            width: @widthMobileLandscape - @gridGutterWidth;
+            width: auto;
             padding: 0;
         }
     }
diff --git a/media/img/sandstone/arrow-go.png b/media/img/sandstone/arrow-go.png
new file mode 100644
index 00000000000..c4ec27668e9
Binary files /dev/null and b/media/img/sandstone/arrow-go.png differ
diff --git a/media/img/sandstone/icn-menu.png b/media/img/sandstone/icn-menu.png
new file mode 100644
index 00000000000..a72c4ab82cc
Binary files /dev/null and b/media/img/sandstone/icn-menu.png differ
diff --git a/media/img/sandstone/menu-point.png b/media/img/sandstone/menu-point.png
new file mode 100644
index 00000000000..8f5cb6a2f28
Binary files /dev/null and b/media/img/sandstone/menu-point.png differ
diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
new file mode 100644
index 00000000000..0cc2f3d2ed2
--- /dev/null
+++ b/media/js/nav-main-resp.js
@@ -0,0 +1,429 @@
+(function() {
+
+// If there's no nav-main element, don't initialize the menu.
+if ($('#nav-main').length === 0) {
+    return;
+}
+
+var NavMain = {};
+
+/**
+ * Whether or not min/max width media queries are supported in CSS
+ *
+ * If not supported, the small mode is never triggered.
+ *
+ * @var Boolean
+ */
+NavMain.hasMediaQueryWidths = (function() {
+    return !(/MSIE\ (4|5|6|7|8)/.test(navigator.userAgent));
+})();
+
+/**
+ * Whether or not the main nav is in small mode
+ *
+ * @var Boolean
+ */
+NavMain.smallMode = false;
+
+/**
+ * Whether or not the main menu is opened in small mode
+ *
+ * @var Boolean
+ */
+NavMain.smallMenuOpen = false;
+
+/**
+ * Jquery object representing the currently opened sub-menu
+ * in small-mode
+ *
+ * @var jQuery
+ */
+NavMain.currentSmallSubmenu = null;
+
+/**
+ * Jquery object representing the previously focused main menu item
+ *
+ * @var jQuery
+ */
+NavMain.previousMenuItem = null;
+
+/**
+ * Jquery object representing the currently focused sub-menu item
+ *
+ * @var jQuery
+ */
+NavMain.currentSubmenuItem = null;
+
+/**
+ * Main menu items in the menubar
+ *
+ * @var jQuery
+ */
+NavMain.mainMenuItems = null;
+
+/**
+ * Main menu items in the menubar
+ *
+ * @var jQuery
+ */
+NavMain.mainMenuLinks = null;
+
+NavMain.init = function()
+{
+    NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
+    NavMain.mainMenuLinks = $('#nav-main [role="menubar"] > li > [tabindex="0"]');
+
+    NavMain.mainMenuItems
+        .bind('mouseover focusin', NavMain.handleFocusIn)
+        .bind('mouseout focusout', NavMain.handleFocusOut)
+        .each(NavMain.initSubmenu);
+
+    if (NavMain.hasMediaQueryWidths) {
+        $(window).resize(NavMain.handleResize);
+        NavMain.handleResize();
+    }
+
+    // set up small-mode menu toggle button
+    $('#nav-main .toggle')
+        .click(function(e) {
+            e.preventDefault();
+            NavMain.toggleSmallMenu();
+        })
+        .keydown(function(e) {
+            if (e.keyCode == 13) {
+                NavMain.toggleSmallMenu();
+            }
+        });
+
+    // On touch-enabled devices, hijack the click event and just make it focus
+    // the item. This prevents flashing menus on iOS and prevents clicking on
+    // a top-level item causing navigation on Android.
+    if ('ontouchstart' in window) {
+        NavMain.mainMenuLinks.click(function(e) {
+            e.preventDefault();
+            this.focus();
+        });
+    }
+
+    // With JavaScript enabled, we can provide a full navigation with
+    // #nav-main. Now "hide" the duplicated #footer-menu from AT.
+    $('#footer-menu').attr('role', 'presentation');
+};
+
+NavMain.handleFocusIn = function(e)
+{
+    var item = $(this);
+
+    if (NavMain.previousMenuItem) {
+        if (NavMain.previousMenuItem.attr('id') !== item.attr('id')) {
+            // Close the last selected menu
+            NavMain.previousMenuItem.dequeue();
+        } else {
+            NavMain.previousMenuItem.clearQueue();
+        }
+    }
+
+    // Open the menu
+    item
+        .addClass('hover')
+        .find('[aria-expanded="false"]')
+        .attr('aria-expanded', 'true');
+};
+
+NavMain.handleFocusOut = function(e)
+{
+    NavMain.previousMenuItem = $(this);
+    NavMain.previousMenuItem
+        .delay(100)
+        .queue(function() {
+            if (NavMain.previousMenuItem) {
+                // Close the menu
+                NavMain.previousMenuItem
+                    .clearQueue()
+                    .removeClass('hover')
+                    .find('[aria-expanded="true"]')
+                    .attr('aria-expanded', 'false');
+
+                NavMain.previousMenuItem = null;
+
+                // If there was a focused sub-menu item, blur it
+                if (NavMain.currentSubmenuItem) {
+                    NavMain.currentSubmenuItem.get(0).blur();
+                }
+            }
+        });
+};
+
+NavMain.initSubmenu = function(menu_idx)
+{
+    var menu = $(this).find('[role="menu"]');
+    var menuItems = $(this).find('a');
+
+    menuItems.mouseover(function(e) {
+        this.focus(); // Sometimes $(this).focus() doesn't work
+    }).focus(function() {
+        NavMain.currentSubmenuItem = $(this);
+    }).each(function(item_idx) {
+        $(this).keydown(function(e) {
+            var target;
+            switch (e.keyCode) {
+                case 33: // Page Up
+                case 36: // Home
+                    target = menuItems.first();
+                    break;
+
+                case 34: // Page Down
+                case 35: // End
+                    target = menuItems.last();
+                    break;
+
+                case 38: // Up
+                    target = (item_idx > 0)
+                        ? menuItems.eq(item_idx - 1)
+                        : menuItems.last();
+
+                    break;
+
+                case 40: // Down
+                    target = (item_idx < menuItems.length - 1)
+                        ? menuItems.eq(item_idx + 1)
+                        : menuItems.first();
+
+                    break;
+
+                case 37: // Left
+                    target = (menu_idx > 0)
+                        ? NavMain.mainMenuLinks.eq(menu_idx - 1)
+                        : NavMain.mainMenuLinks.last();
+
+                    break;
+
+                case 39: // Right
+                    target = (menu_idx < NavMain.mainMenuLinks.length - 1)
+                        ? NavMain.mainMenuLinks.eq(menu_idx + 1)
+                        : NavMain.mainMenuLinks.first();
+
+                    break;
+            }
+            if (target) {
+                target.get(0).focus(); // Sometimes target.focus() doesn't work
+                return false;
+            }
+            return true;
+        });
+    });
+};
+
+NavMain.handleResize = function()
+{
+    var width = $(window).width();
+
+    if (width <= 760 && !NavMain.smallMode) {
+        NavMain.enterSmallMode();
+    }
+
+    if (width > 760 && NavMain.smallMode) {
+        NavMain.leaveSmallMode();
+    }
+};
+
+NavMain.enterSmallMode = function()
+{
+    NavMain.unlinkMainMenuItems();
+
+    $('#nav-main-menu').attr('aria-hidden', 'true');
+
+    $(document).click(NavMain.handleDocumentClick);
+    $('a, input, textarea, button, :focus')
+        .focus(NavMain.handleDocumentFocus);
+
+    NavMain.smallMode = true;
+};
+
+NavMain.leaveSmallMode = function()
+{
+    NavMain.relinkMainMenuLinks();
+
+    $('#nav-main-menu').removeAttr('aria-hidden');
+
+    $(document).unbind('click', NavMain.handleDocumentClick);
+    $('a, input, textarea, button, :focus')
+        .unbind('focus', NavMain.handleDocumentFocus);
+
+    NavMain.smallMode = false;
+    NavMain.smallMenuOpen = false;
+};
+
+/**
+ * Removes the href attribute from menu items with submenus
+ *
+ * This prevents load bar from appearing on iOS when you press
+ * an item.
+ */
+NavMain.unlinkMainMenuItems = function()
+{
+    NavMain.mainMenuLinks.each(function(i, n) {
+        var node = $(n);
+        if (node.siblings('.submenu')) {
+            node.attr('data-old-href', node.attr('href'));
+            node.removeAttr('href');
+        }
+    });
+};
+
+/**
+ * Returns the href attribute back to main menu links
+ */
+NavMain.relinkMainMenuLinks = function()
+{
+    NavMain.mainMenuLinks.each(function(i, n) {
+        var node = $(n);
+        if (node.attr('data-old-href')) {
+            node.attr('href', node.attr('data-old-href'));
+            node.removeAttr('data-old-href');
+        }
+    });
+};
+
+NavMain.handleDocumentClick = function(e)
+{
+    if (NavMain.smallMode) {
+        var $clicked = $(e.target);
+        if (!$clicked.parents().is('#nav-main')) {
+            NavMain.closeSmallMenu();
+        }
+    }
+};
+
+NavMain.handleDocumentFocus = function(e)
+{
+    var $focused = $(e.target);
+    if (!$focused.parents().is('#nav-main')) {
+        NavMain.closeSmallMenu();
+    }
+};
+
+NavMain.handleToggleKeypress = function(e)
+{
+    if (e.keyCode == 13) {
+        NavMain.toggleSmallMenu();
+    }
+};
+
+NavMain.toggleSmallMenu = function()
+{
+    if (NavMain.smallMenuOpen) {
+        NavMain.closeSmallMenu();
+    } else {
+        NavMain.openSmallMenu();
+    }
+};
+
+NavMain.openSmallMenu = function()
+{
+    if (NavMain.smallMenuOpen) {
+        return;
+    }
+
+    $('#nav-main-menu')
+        .slideToggle(150)
+        .removeAttr('aria-hidden');
+
+    $('#nav-main .toggle').addClass('open');
+
+    // add click handler and set submenu class on submenus
+    NavMain.mainMenuLinks
+        .addClass('submenu-item')
+        .click(NavMain.handleSubmenuClick);
+
+    // focus first item
+    $('#nav-main-menu [tabindex=0]').get(0).focus();
+
+    NavMain.smallMenuOpen = true;
+};
+
+NavMain.closeSmallMenu = function()
+{
+    if (!NavMain.smallMenuOpen) {
+        return;
+    }
+
+    $('#nav-main-menu, #nav-main-menu .submenu')
+        .slideUp(100)
+        .attr('aria-hidden', 'true');
+
+    $('#nav-main .toggle').removeClass('open');
+
+    // remove submenu click handler and CSS class
+    NavMain.mainMenuLinks
+        .addClass('submenu-item')
+        .unbind('click', NavMain.handleSubmenuClick);
+
+    if (NavMain.currentSmallSubmenu) {
+        NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
+    }
+    NavMain.currentSmallSubmenu = null;
+
+    NavMain.smallMenuOpen = false;
+};
+
+NavMain.handleSubmenuClick = function(e)
+{
+    e.preventDefault();
+    var menu = $(this).siblings('.submenu');
+    NavMain.openSmallSubmenu(menu);
+};
+
+NavMain.openSmallSubmenu = function(menu)
+{
+    // close previous menu
+    if ( NavMain.currentSmallSubmenu
+        && NavMain.currentSmallSubmenu.get(0).id !== menu.get(0).id) {
+        NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
+    }
+
+    // skip current menu
+    if ( NavMain.currentSmallSubmenu
+        && NavMain.currentSmallSubmenu.get(0).id === menu.get(0).id) {
+        // still focus first item
+        menu.find('a').get(0).focus();
+        return;
+    }
+
+    menu
+        .stop(true)
+        .css(
+            {
+                'left'         : '80px',
+                'top'          : '0',
+                'display'      : 'none',
+                'opacity'      : '1',
+                'height'       : 'auto',
+                'marginTop'    : '-8px',
+                'marginBottom' : '0'
+            }
+        )
+        .slideDown(150)
+        .attr('aria-expanded', 'true');
+
+    // focus first item
+    menu.find('a').get(0).focus();
+
+    NavMain.currentSmallSubmenu = menu;
+};
+
+NavMain.closeSmallSubmenu = function(menu)
+{
+    menu
+        .stop(true)
+        .fadeOut(100, function() {
+        menu
+            .css('left', '-999em')
+            .css('top', '0')
+            .attr('aria-expanded', 'false');
+    });
+};
+
+$(document).ready(NavMain.init);
+
+})();
diff --git a/media/js/nav-main.js b/media/js/nav-main.js
index 2652771cfec..97ccecd192b 100644
--- a/media/js/nav-main.js
+++ b/media/js/nav-main.js
@@ -78,7 +78,68 @@ $(document).ready(function() {
     });
   });
 
+if ( $(window).width() <= 760 ) {
+  
+  // mobile dropdown menu
+  $("#nav-main .toggle").click(function() {
+    if ( $("#nav-main-menu").is(":visible") ) {
+      $("#nav-main-menu:visible").slideUp(100).attr("aria-expanded", "false");
+      $("#nav-main .toggle.open").removeClass("open");
+    }
+    else {
+      $("#nav-main-menu").slideToggle(150).attr("aria-expanded", "true");
+      $(this).toggleClass("open");
+    }
+    return false;
+  });
+  
+  $("#nav-main-menu a[aria-haspopup='true']").click(function(){
+    if ( $(this).next(".submenu").is(":visible") ) {
+      $(this).next(".submenu").slideUp(100).attr("aria-expanded", "false");
+    }
+    else {
+      $(this).next(".submenu").slideDown(150).attr("aria-expanded", "true");
+    }
+    return false;
+  });
+
+/*
+  // Hide menu when anything else is clicked
+  $(document).bind('click', function(e) {
+    var $clicked = $(e.target);
+    if (! $clicked.parents("#nav-main"))
+      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+  });
+ 
+  // or gets focus
+  $("a, input, textarea, button, :focus").bind('focus', function(e) {
+    var $focused = $(e.target);
+    if (! $focused.parents("#nav-main")) {
+      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+    }
+  });
+*/
+
+  
+} // endif
+  
+    // reset the menu for wider windows   
+  $(window).resize(function() {
+    if ( $(window).width() >= 761 ) {
+      $("#nav-main-menu").removeAttr("style").removeAttr("aria-hidden");
+    }
+    else if ( $(window).width() <= 760 ) {
+      $("#nav-main-menu").removeAttr("style").attr("aria-hidden", "true");
+    }
+  });
+  
+
+
   // With JavaScript enabled, we can provide a full navigation with #nav-main.
   // Now "hide" the duplicated #footer-menu from AT.
   $('#footer-menu').attr('role', 'presentation');
+
+  
 });
diff --git a/settings/base.py b/settings/base.py
index db828e9e315..084c799571d 100644
--- a/settings/base.py
+++ b/settings/base.py
@@ -225,6 +225,12 @@ def JINJA_CONFIG():
             'js/nav-main.js',
             'js/footer-email-form.js',
         ),
+        'firefox-resp': (
+            'js/libs/jquery-1.7.1.min.js',
+            'js/global.js',
+            'js/nav-main-resp.js',
+            'js/footer-email-form.js',
+        ),
         'firefox_central': (
             'js/mozilla-video-tools.js',
             'js/firefox/central.js',
diff --git a/templates/base-resp.html b/templates/base-resp.html
index 350d7730ccf..989904ff499 100644
--- a/templates/base-resp.html
+++ b/templates/base-resp.html
@@ -7,7 +7,7 @@
 
     <title>{% block page_title_prefix %}Mozilla — {% endblock %}{% block page_title %}{% endblock %}{% block page_title_suffix %} — mozilla.org{% endblock %}</title>
 
-    <link href="//mozilla.org/tabzilla/media/css/tabzilla.css" rel="stylesheet">
+    <link href="/tabzilla/media/css/tabzilla.css" rel="stylesheet">
 
     <!--[if lte IE 8]>
     <script src="/media/js/libs/html5shiv.js"></script>
@@ -38,13 +38,14 @@
         <a href="http://www.mozilla.org/" id="tabzilla">{{ _('Mozilla') }}</a>
 
         {% block site_header_nav %}
-        <nav id="nav-main" role="navigation">
-        <ol>
-            <li><a href="{{ url('mozorg.mission') }}">{{_('Mission')}}</a></li>
-            <li><a href="{{ url('mozorg.about') }}">{{_('About')}}</a></li>
-            <li><a href="{{ url('mozorg.projects') }}">{{_('Projects')}}</a></li>
-            <li><a href="{{ url('mozorg.contribute') }}">{{_('Get Involved')}}</a></li>
-        </ol>
+        <nav id="nav-main" role="menubar">
+          <span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
+          <ul role="menu" id="nav-main-menu">
+            <li role="menuitem" class="first"><a href="{{ url('mozorg.mission') }}">{{_('Mission')}}</a></li>
+            <li role="menuitem"><a href="{{ url('mozorg.about') }}">{{_('About')}}</a></li>
+            <li role="menuitem"><a href="{{ url('mozorg.projects') }}">{{_('Projects')}}</a></li>
+            <li role="menuitem" class="last"><a href="{{ url('mozorg.contribute') }}">{{_('Get Involved')}}</a></li>
+          </ul>
         </nav>
         {% endblock %}
 
@@ -159,7 +160,7 @@ <h3>{{_('Thank you for signing up!')}}</h3>
       </footer>
     {% endblock %}
 
-    <script src="//mozilla.org/tabzilla/media/js/tabzilla.js"></script>
+    <script src="/tabzilla/media/js/tabzilla.js"></script>
     </div><!-- close #outer-wrapper -->
 
     {% block site_js %}
@@ -170,5 +171,50 @@ <h3>{{_('Thank you for signing up!')}}</h3>
     {% block webtrends %}
      {% include "includes/webtrends.html" %}
     {% endblock %}
+    
+<script>
+  // mobile dropdown menu
+  $("#nav-main .toggle").click(function() {
+    if ( $("#nav-main-menu").is(":visible") ) {
+      $("#nav-main-menu:visible").slideUp(100).attr("aria-expanded", "false");
+      $("#nav-main .toggle.open").removeClass("open");
+    }
+    else {
+      $("#nav-main-menu").slideToggle(150).attr("aria-expanded", "true");
+      $(this).toggleClass("open");
+    }
+    return false;
+  });
+
+/*
+  // Hide menu when anything else is clicked
+  $(document).bind('click', function(e) {
+    var $clicked = $(e.target);
+    if (! $clicked.parents("#nav-main"))
+      $("#nav-main-menu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+  });
+  
+  // or gets focus
+  $("a, input, textarea, button, :focus").bind('focus', function(e) {
+    var $focused = $(e.target);
+    if (! $focused.parents("#nav-main")) {
+      $("#nav-main-menu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+    }
+  });
+*/
+
+  // reset the menu for wider windows   
+  $(window).resize(function() {
+    if ( $(window).width() >= 761 ) {
+      $("#nav-main-menu").removeAttr("style").attr("aria-expanded", "true");
+    }
+    else if ( $(window).width() <= 760 ) {
+      $("#nav-main-menu").removeAttr("style").attr("aria-expanded", "false");
+    }
+  });
+  </script>
+    
   </body>
 </html>