diff --git a/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee
index 68c4b331d8..dea2448d34 100644
--- a/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/off_canvas_wrap.js.coffee
@@ -5,6 +5,9 @@
 # the page. This is not workable if the height of the contents of the off-canvas exceeds the height
 # of the screen, because the latter portion of the contents stays hidden to the user.
 #
+# However, for screens over 1024px width for which the off-canvas is not styled to be visible, we
+# can proceed to hide this.
+#
 # https://github.com/openfoodfoundation/angular-foundation/blob/0.9.0-20180826174721/src/offcanvas/offcanvas.js
 angular.module('mm.foundation.offcanvas').directive 'offCanvasWrap', ($window) ->
   {
@@ -19,4 +22,8 @@ angular.module('mm.foundation.offcanvas').directive 'offCanvasWrap', ($window) -
 
       # Unbind hiding of the off-canvas upon window resize.
       win.unbind('resize.body', isolatedScope.hide)
+
+      # Bind hiding of the off-canvas that only happens when screen width is over 1024px.
+      win.bind 'resize.body', ->
+        isolatedScope.hide() if $(window).width() > 1024
   }