diff --git a/app/assets/javascripts/darkswarm/layout/offcanvas.js.coffee b/app/assets/javascripts/darkswarm/layout/offcanvas.js.coffee
new file mode 100644
index 0000000000..924e6b882a
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/layout/offcanvas.js.coffee
@@ -0,0 +1,6 @@
+$ ->
+  menu = $(".left-off-canvas-menu")
+  setOffcanvasMenuHeight = ->
+    menu.height($(window).height())
+  $(window).on("resize", setOffcanvasMenuHeight)
+  setOffcanvasMenuHeight()
diff --git a/app/assets/stylesheets/darkswarm/all.scss b/app/assets/stylesheets/darkswarm/all.scss
index 2f73f5e796..ee1c4fc690 100644
--- a/app/assets/stylesheets/darkswarm/all.scss
+++ b/app/assets/stylesheets/darkswarm/all.scss
@@ -10,6 +10,7 @@
 @import 'foundation-icons';
 
 @import 'base/*';
+@import 'layout/*';
 @import '*';
 @import 'pages/*';
 @import '../web/all';
diff --git a/app/assets/stylesheets/darkswarm/layout/offcanvas.css.scss b/app/assets/stylesheets/darkswarm/layout/offcanvas.css.scss
new file mode 100644
index 0000000000..de54f0ef54
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/layout/offcanvas.css.scss
@@ -0,0 +1,17 @@
+@import "compass/css3/transition";
+
+.off-canvas-fixed {
+  @include transition(transform 1000ms ease-in-out);
+}
+
+.move-right > .off-canvas-fixed {
+  height: 100%;
+  -webkit-transform: translate3d(15.625rem, 0, 0);
+  transform: translate3d(15.625rem, 0, 0);
+}
+
+.left-off-canvas-menu {
+  -webkit-transform: none;
+  transform: none;
+  margin-left: -15.625rem;
+}
diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss
index df811aba42..6e6e7644b0 100644
--- a/app/assets/stylesheets/darkswarm/menu.css.scss
+++ b/app/assets/stylesheets/darkswarm/menu.css.scss
@@ -222,7 +222,7 @@ nav.top-bar {
   background-color: white;
 }
 
-.off-canvas-wrap.move-right ul.off-canvas-list {
+.off-canvas-wrap ul.off-canvas-list {
   font-size: 0.875rem;
 
   .li-menu {
@@ -242,12 +242,10 @@ nav.top-bar {
       background-color: transparent;
       color: $brand-colour;
     }
-
-    @include transition(all 0.3s ease-in-out);
   }
 }
 
-.off-canvas-wrap.move-right ul.off-canvas-list i {
+.off-canvas-wrap ul.off-canvas-list i {
   font-size: 1.5rem;
   margin-right: 0.25rem;
 }
diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml
index 79d78c67ea..c3462302f4 100644
--- a/app/views/layouts/darkswarm.html.haml
+++ b/app/views/layouts/darkswarm.html.haml
@@ -42,9 +42,10 @@
     = inject_currency_config
 
     .off-canvas-wrap{offcanvas: true}
-      .inner-wrap
+      .fixed.off-canvas-fixed
         = render "shared/menu/menu" unless @hide_menu
 
+      .inner-wrap
         %section{ role: "main" }
           = yield
 
diff --git a/app/views/shared/menu/_menu.html.haml b/app/views/shared/menu/_menu.html.haml
index 616b128d78..050a3f043e 100644
--- a/app/views/shared/menu/_menu.html.haml
+++ b/app/views/shared/menu/_menu.html.haml
@@ -1,4 +1,4 @@
-.fixed
-  = render partial: "shared/menu/large_menu"
-  %ofn-flash
-= render partial: "shared/menu/mobile_menu"
+= render "shared/menu/large_menu"
+%ofn-flash
+= render "shared/menu/mobile_menu"
+= render "shared/menu/offcanvas_menu"
diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml
index 5b8ca59f99..4fec4156d7 100644
--- a/app/views/shared/menu/_mobile_menu.html.haml
+++ b/app/views/shared/menu/_mobile_menu.html.haml
@@ -20,5 +20,3 @@
 
     %a{href: main_app.shop_path}
       {{ CurrentHub.hub.name }}
-
-= render partial: "shared/menu/offcanvas_menu" unless @hide_menu