diff --git a/assets/common/application/offcanvas/index.js b/assets/common/application/offcanvas/index.js
index 3c63b744a..a50295cad 100644
--- a/assets/common/application/offcanvas/index.js
+++ b/assets/common/application/offcanvas/index.js
@@ -237,14 +237,14 @@ var Offcanvas = new prime({
     _setTransition: function() {
         var panel = this.panel[0];
 
-        panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
+        //panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
     },
 
     _translateXTo: function(x) {
         var panel = this.panel[0];
         this.offset.x.current = x;
 
-        panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
+        //panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
     },
 
     _bodyScroll: function() {
@@ -312,7 +312,7 @@ var Offcanvas = new prime({
 
             overlayOpacity = mapNumber(Math.abs(translateX), 0, this.options.padding, 0, 1);
 
-            this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
+            //this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
             this.overlay[0].style.opacity = overlayOpacity;
 
             this.moved = true;
@@ -362,4 +362,4 @@ var Offcanvas = new prime({
     }
 });
 
-module.exports = Offcanvas;
\ No newline at end of file
+module.exports = Offcanvas;
diff --git a/assets/common/js/main.js b/assets/common/js/main.js
index c76011806..f6f9e2b11 100644
--- a/assets/common/js/main.js
+++ b/assets/common/js/main.js
@@ -315,7 +315,7 @@ var Menu = new prime({
 });
 
 module.exports = Menu;
-},{"../utils/dollar-extras":5,"domready":6,"elements/zen":35,"mout/function/bind":39,"mout/function/timeout":43,"prime":77,"prime-util/prime/bound":73,"prime-util/prime/options":74}],3:[function(require,module,exports){
+},{"../utils/dollar-extras":5,"domready":6,"elements/zen":35,"mout/function/bind":39,"mout/function/timeout":43,"prime":84,"prime-util/prime/bound":80,"prime-util/prime/options":81}],3:[function(require,module,exports){
 // Offcanvas slide with desktop, touch and all-in-one touch devices support that supports both left and right placement.
 // Fast and optimized using CSS3 transitions
 // Based on the awesome Slideout.js <https://mango.github.io/slideout/>
@@ -555,14 +555,14 @@ var Offcanvas = new prime({
     _setTransition: function() {
         var panel = this.panel[0];
 
-        panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
+        //panel.style[prefix.css + 'transition'] = panel.style.transition = prefix.css + 'transform ' + this.options.duration + 'ms ' + this.options.effect;
     },
 
     _translateXTo: function(x) {
         var panel = this.panel[0];
         this.offset.x.current = x;
 
-        panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
+        //panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)';
     },
 
     _bodyScroll: function() {
@@ -630,7 +630,7 @@ var Offcanvas = new prime({
 
             overlayOpacity = mapNumber(Math.abs(translateX), 0, this.options.padding, 0, 1);
 
-            this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
+            //this.panel[0].style[prefix.css + 'transform'] = this.panel[0].style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
             this.overlay[0].style.opacity = overlayOpacity;
 
             this.moved = true;
@@ -681,7 +681,8 @@ var Offcanvas = new prime({
 });
 
 module.exports = Offcanvas;
-},{"../utils/decouple":4,"domready":6,"elements":11,"elements/zen":35,"mout/array/forEach":36,"mout/function/bind":39,"mout/function/timeout":43,"mout/math/clamp":48,"mout/math/map":50,"mout/string/trim":59,"prime":77,"prime-util/prime/bound":73,"prime-util/prime/options":74}],4:[function(require,module,exports){
+
+},{"../utils/decouple":4,"domready":6,"elements":11,"elements/zen":35,"mout/array/forEach":36,"mout/function/bind":39,"mout/function/timeout":43,"mout/math/clamp":48,"mout/math/map":50,"mout/string/trim":59,"prime":84,"prime-util/prime/bound":80,"prime-util/prime/options":81}],4:[function(require,module,exports){
 'use strict';
 
 var rAF = (function() {
@@ -746,7 +747,7 @@ $.implement({
 
 module.exports = $;
 
-},{"elements":11,"mout/array/map":37,"slick":89}],6:[function(require,module,exports){
+},{"elements":11,"mout/array/map":37,"slick":96}],6:[function(require,module,exports){
 /*!
   * domready (c) Dustin Diaz 2014 - License MIT
   */
@@ -1128,7 +1129,7 @@ var Elements = prime({
 
 module.exports = $
 
-},{"mout/array/every":13,"mout/array/filter":14,"mout/array/forEach":15,"mout/array/map":17,"mout/array/some":18,"prime":77}],9:[function(require,module,exports){
+},{"mout/array/every":13,"mout/array/filter":14,"mout/array/forEach":15,"mout/array/map":17,"mout/array/some":18,"prime":84}],9:[function(require,module,exports){
 /*
 delegation
 */"use strict"
@@ -1211,7 +1212,7 @@ $.implement({
 
 module.exports = $
 
-},{"./events":10,"./traversal":34,"prime/map":78}],10:[function(require,module,exports){
+},{"./events":10,"./traversal":34,"prime/map":85}],10:[function(require,module,exports){
 /*
 events
 */"use strict"
@@ -1291,7 +1292,7 @@ $.implement({
 
 module.exports = $
 
-},{"./base":8,"prime/emitter":76}],11:[function(require,module,exports){
+},{"./base":8,"prime/emitter":83}],11:[function(require,module,exports){
 /*
 elements
 */"use strict"
@@ -2065,7 +2066,7 @@ $.implement({
 
 module.exports = $
 
-},{"./base":8,"mout/array/map":17,"slick":89}],35:[function(require,module,exports){
+},{"./base":8,"mout/array/map":17,"slick":96}],35:[function(require,module,exports){
 /*
 zen
 */"use strict"
@@ -2123,7 +2124,7 @@ module.exports = function(expression, doc){
 
 }
 
-},{"./base":8,"mout/array/forEach":15,"mout/array/map":17,"slick/parser":90}],36:[function(require,module,exports){
+},{"./base":8,"mout/array/forEach":15,"mout/array/map":17,"slick/parser":97}],36:[function(require,module,exports){
 arguments[4][15][0].apply(exports,arguments)
 },{"dup":15}],37:[function(require,module,exports){
 arguments[4][17][0].apply(exports,arguments)
@@ -2499,6 +2500,128 @@ var forOwn = require('./forOwn');
 
 
 },{"./forOwn":69}],73:[function(require,module,exports){
+/*
+prime
+ - prototypal inheritance
+*/"use strict"
+
+var hasOwn = require("mout/object/hasOwn"),
+    mixIn  = require("mout/object/mixIn"),
+    create = require("mout/lang/createObject"),
+    kindOf = require("mout/lang/kindOf")
+
+var hasDescriptors = true
+
+try {
+    Object.defineProperty({}, "~", {})
+    Object.getOwnPropertyDescriptor({}, "~")
+} catch (e){
+    hasDescriptors = false
+}
+
+// we only need to be able to implement "toString" and "valueOf" in IE < 9
+var hasEnumBug = !({valueOf: 0}).propertyIsEnumerable("valueOf"),
+    buggy      = ["toString", "valueOf"]
+
+var verbs = /^constructor|inherits|mixin$/
+
+var implement = function(proto){
+    var prototype = this.prototype
+
+    for (var key in proto){
+        if (key.match(verbs)) continue
+        if (hasDescriptors){
+            var descriptor = Object.getOwnPropertyDescriptor(proto, key)
+            if (descriptor){
+                Object.defineProperty(prototype, key, descriptor)
+                continue
+            }
+        }
+        prototype[key] = proto[key]
+    }
+
+    if (hasEnumBug) for (var i = 0; (key = buggy[i]); i++){
+        var value = proto[key]
+        if (value !== Object.prototype[key]) prototype[key] = value
+    }
+
+    return this
+}
+
+var prime = function(proto){
+
+    if (kindOf(proto) === "Function") proto = {constructor: proto}
+
+    var superprime = proto.inherits
+
+    // if our nice proto object has no own constructor property
+    // then we proceed using a ghosting constructor that all it does is
+    // call the parent's constructor if it has a superprime, else an empty constructor
+    // proto.constructor becomes the effective constructor
+    var constructor = (hasOwn(proto, "constructor")) ? proto.constructor : (superprime) ? function(){
+        return superprime.apply(this, arguments)
+    } : function(){}
+
+    if (superprime){
+
+        mixIn(constructor, superprime)
+
+        var superproto = superprime.prototype
+        // inherit from superprime
+        var cproto = constructor.prototype = create(superproto)
+
+        // setting constructor.parent to superprime.prototype
+        // because it's the shortest possible absolute reference
+        constructor.parent = superproto
+        cproto.constructor = constructor
+    }
+
+    if (!constructor.implement) constructor.implement = implement
+
+    var mixins = proto.mixin
+    if (mixins){
+        if (kindOf(mixins) !== "Array") mixins = [mixins]
+        for (var i = 0; i < mixins.length; i++) constructor.implement(create(mixins[i].prototype))
+    }
+
+    // implement proto and return constructor
+    return constructor.implement(proto)
+
+}
+
+module.exports = prime
+
+},{"mout/lang/createObject":74,"mout/lang/kindOf":75,"mout/object/hasOwn":78,"mout/object/mixIn":79}],74:[function(require,module,exports){
+var mixIn = require('../object/mixIn');
+
+    /**
+     * Create Object using prototypal inheritance and setting custom properties.
+     * - Mix between Douglas Crockford Prototypal Inheritance <http://javascript.crockford.com/prototypal.html> and the EcmaScript 5 `Object.create()` method.
+     * @param {object} parent    Parent Object.
+     * @param {object} [props] Object properties.
+     * @return {object} Created object.
+     */
+    function createObject(parent, props){
+        function F(){}
+        F.prototype = parent;
+        return mixIn(new F(), props);
+
+    }
+    module.exports = createObject;
+
+
+
+},{"../object/mixIn":79}],75:[function(require,module,exports){
+arguments[4][24][0].apply(exports,arguments)
+},{"dup":24}],76:[function(require,module,exports){
+arguments[4][27][0].apply(exports,arguments)
+},{"./hasOwn":78,"dup":27}],77:[function(require,module,exports){
+arguments[4][28][0].apply(exports,arguments)
+},{"./forIn":76,"./hasOwn":78,"dup":28}],78:[function(require,module,exports){
+arguments[4][29][0].apply(exports,arguments)
+},{"dup":29}],79:[function(require,module,exports){
+arguments[4][72][0].apply(exports,arguments)
+},{"./forOwn":77,"dup":72}],80:[function(require,module,exports){
 "use strict";
 
 // credits to @cpojer's Class.Binds, released under the MIT license
@@ -2518,7 +2641,7 @@ var bound = prime({
 
 module.exports = bound
 
-},{"mout/function/bind":61,"prime":77}],74:[function(require,module,exports){
+},{"mout/function/bind":61,"prime":73}],81:[function(require,module,exports){
 "use strict";
 
 var prime = require("prime")
@@ -2537,7 +2660,7 @@ var Options = prime({
 
 module.exports = Options
 
-},{"mout/object/merge":71,"prime":77}],75:[function(require,module,exports){
+},{"mout/object/merge":71,"prime":73}],82:[function(require,module,exports){
 (function (process,global){
 /*
 defer
@@ -2656,7 +2779,7 @@ module.exports = defer
 
 }).call(this,require('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 
-},{"_process":91,"mout/array/forEach":79,"mout/array/indexOf":80,"mout/lang/kindOf":82,"mout/time/now":87}],76:[function(require,module,exports){
+},{"_process":98,"mout/array/forEach":86,"mout/array/indexOf":87,"mout/lang/kindOf":89,"mout/time/now":94}],83:[function(require,module,exports){
 /*
 Emitter
 */"use strict"
@@ -2722,99 +2845,9 @@ Emitter.EMIT_SYNC = {}
 
 module.exports = Emitter
 
-},{"./defer":75,"./index":77,"mout/array/forEach":79,"mout/array/indexOf":80}],77:[function(require,module,exports){
-/*
-prime
- - prototypal inheritance
-*/"use strict"
-
-var hasOwn = require("mout/object/hasOwn"),
-    mixIn  = require("mout/object/mixIn"),
-    create = require("mout/lang/createObject"),
-    kindOf = require("mout/lang/kindOf")
-
-var hasDescriptors = true
-
-try {
-    Object.defineProperty({}, "~", {})
-    Object.getOwnPropertyDescriptor({}, "~")
-} catch (e){
-    hasDescriptors = false
-}
-
-// we only need to be able to implement "toString" and "valueOf" in IE < 9
-var hasEnumBug = !({valueOf: 0}).propertyIsEnumerable("valueOf"),
-    buggy      = ["toString", "valueOf"]
-
-var verbs = /^constructor|inherits|mixin$/
-
-var implement = function(proto){
-    var prototype = this.prototype
-
-    for (var key in proto){
-        if (key.match(verbs)) continue
-        if (hasDescriptors){
-            var descriptor = Object.getOwnPropertyDescriptor(proto, key)
-            if (descriptor){
-                Object.defineProperty(prototype, key, descriptor)
-                continue
-            }
-        }
-        prototype[key] = proto[key]
-    }
-
-    if (hasEnumBug) for (var i = 0; (key = buggy[i]); i++){
-        var value = proto[key]
-        if (value !== Object.prototype[key]) prototype[key] = value
-    }
-
-    return this
-}
-
-var prime = function(proto){
-
-    if (kindOf(proto) === "Function") proto = {constructor: proto}
-
-    var superprime = proto.inherits
-
-    // if our nice proto object has no own constructor property
-    // then we proceed using a ghosting constructor that all it does is
-    // call the parent's constructor if it has a superprime, else an empty constructor
-    // proto.constructor becomes the effective constructor
-    var constructor = (hasOwn(proto, "constructor")) ? proto.constructor : (superprime) ? function(){
-        return superprime.apply(this, arguments)
-    } : function(){}
-
-    if (superprime){
-
-        mixIn(constructor, superprime)
-
-        var superproto = superprime.prototype
-        // inherit from superprime
-        var cproto = constructor.prototype = create(superproto)
-
-        // setting constructor.parent to superprime.prototype
-        // because it's the shortest possible absolute reference
-        constructor.parent = superproto
-        cproto.constructor = constructor
-    }
-
-    if (!constructor.implement) constructor.implement = implement
-
-    var mixins = proto.mixin
-    if (mixins){
-        if (kindOf(mixins) !== "Array") mixins = [mixins]
-        for (var i = 0; i < mixins.length; i++) constructor.implement(create(mixins[i].prototype))
-    }
-
-    // implement proto and return constructor
-    return constructor.implement(proto)
-
-}
-
-module.exports = prime
-
-},{"mout/lang/createObject":81,"mout/lang/kindOf":82,"mout/object/hasOwn":85,"mout/object/mixIn":86}],78:[function(require,module,exports){
+},{"./defer":82,"./index":84,"mout/array/forEach":86,"mout/array/indexOf":87}],84:[function(require,module,exports){
+arguments[4][73][0].apply(exports,arguments)
+},{"dup":73,"mout/lang/createObject":88,"mout/lang/kindOf":89,"mout/object/hasOwn":92,"mout/object/mixIn":93}],85:[function(require,module,exports){
 /*
 Map
 */"use strict"
@@ -2940,41 +2973,23 @@ map.prototype = Map.prototype
 
 module.exports = map
 
-},{"./index":77,"mout/array/indexOf":80}],79:[function(require,module,exports){
+},{"./index":84,"mout/array/indexOf":87}],86:[function(require,module,exports){
 arguments[4][15][0].apply(exports,arguments)
-},{"dup":15}],80:[function(require,module,exports){
+},{"dup":15}],87:[function(require,module,exports){
 arguments[4][16][0].apply(exports,arguments)
-},{"dup":16}],81:[function(require,module,exports){
-var mixIn = require('../object/mixIn');
-
-    /**
-     * Create Object using prototypal inheritance and setting custom properties.
-     * - Mix between Douglas Crockford Prototypal Inheritance <http://javascript.crockford.com/prototypal.html> and the EcmaScript 5 `Object.create()` method.
-     * @param {object} parent    Parent Object.
-     * @param {object} [props] Object properties.
-     * @return {object} Created object.
-     */
-    function createObject(parent, props){
-        function F(){}
-        F.prototype = parent;
-        return mixIn(new F(), props);
-
-    }
-    module.exports = createObject;
-
-
-
-},{"../object/mixIn":86}],82:[function(require,module,exports){
+},{"dup":16}],88:[function(require,module,exports){
+arguments[4][74][0].apply(exports,arguments)
+},{"../object/mixIn":93,"dup":74}],89:[function(require,module,exports){
 arguments[4][24][0].apply(exports,arguments)
-},{"dup":24}],83:[function(require,module,exports){
+},{"dup":24}],90:[function(require,module,exports){
 arguments[4][27][0].apply(exports,arguments)
-},{"./hasOwn":85,"dup":27}],84:[function(require,module,exports){
+},{"./hasOwn":92,"dup":27}],91:[function(require,module,exports){
 arguments[4][28][0].apply(exports,arguments)
-},{"./forIn":83,"./hasOwn":85,"dup":28}],85:[function(require,module,exports){
+},{"./forIn":90,"./hasOwn":92,"dup":28}],92:[function(require,module,exports){
 arguments[4][29][0].apply(exports,arguments)
-},{"dup":29}],86:[function(require,module,exports){
+},{"dup":29}],93:[function(require,module,exports){
 arguments[4][72][0].apply(exports,arguments)
-},{"./forOwn":84,"dup":72}],87:[function(require,module,exports){
+},{"./forOwn":91,"dup":72}],94:[function(require,module,exports){
 
 
     /**
@@ -2994,7 +3009,7 @@ arguments[4][72][0].apply(exports,arguments)
 
 
 
-},{}],88:[function(require,module,exports){
+},{}],95:[function(require,module,exports){
 /*
 Slick Finder
 */"use strict"
@@ -3825,7 +3840,7 @@ slick.parse = parse;
 
 module.exports = slick
 
-},{"./parser":90}],89:[function(require,module,exports){
+},{"./parser":97}],96:[function(require,module,exports){
 (function (global){
 /*
 slick
@@ -3835,7 +3850,7 @@ module.exports = "document" in global ? require("./finder") : { parse: require("
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 
-},{"./finder":88,"./parser":90}],90:[function(require,module,exports){
+},{"./finder":95,"./parser":97}],97:[function(require,module,exports){
 /*
 Slick Parser
  - originally created by the almighty Thomas Aylott <@subtlegradient> (http://subtlegradient.com)
@@ -4087,7 +4102,7 @@ var parse = function(expression){
 
 module.exports = parse
 
-},{}],91:[function(require,module,exports){
+},{}],98:[function(require,module,exports){
 // shim for using process in browser
 
 var process = module.exports = {};
diff --git a/engines/common/nucleus/css-compiled/nucleus.css b/engines/common/nucleus/css-compiled/nucleus.css
index a5d4fb83f..67ddbcc10 100644
--- a/engines/common/nucleus/css-compiled/nucleus.css
+++ b/engines/common/nucleus/css-compiled/nucleus.css
@@ -57,6 +57,8 @@ body {
 
 #g-page-surround {
   min-height: 100vh;
+  position: relative;
+  margin: 0;
 }
 
 article,
diff --git a/engines/common/nucleus/scss/nucleus/_core.scss b/engines/common/nucleus/scss/nucleus/_core.scss
index 29c46b943..7389bcdeb 100644
--- a/engines/common/nucleus/scss/nucleus/_core.scss
+++ b/engines/common/nucleus/scss/nucleus/_core.scss
@@ -21,6 +21,8 @@ body {
 
 #g-page-surround {
 	min-height: 100vh;
+    position: relative;
+    margin: 0;
 }
 
 article,
@@ -229,4 +231,4 @@ th {
 		background: #fff !important;
 		color: #000 !important;
 	}
-}
\ No newline at end of file
+}
diff --git a/engines/common/nucleus/scss/nucleus/_offcanvas.scss b/engines/common/nucleus/scss/nucleus/_offcanvas.scss
index 5f0c5206e..8a4f2ac0c 100644
--- a/engines/common/nucleus/scss/nucleus/_offcanvas.scss
+++ b/engines/common/nucleus/scss/nucleus/_offcanvas.scss
@@ -5,7 +5,7 @@
 	right: 0;
 	bottom: 0;
 	overflow-x: hidden;
-	overflow-y: auto; 
+	overflow-y: auto;
 	text-align: left;
     display: none;
 }
@@ -37,7 +37,7 @@
         opacity: 1;
         height: 100%;
     }
-    
+
     #g-offcanvas {
         display: block;
     }
@@ -56,4 +56,4 @@ body .g-offcanvas-hide {
 		left: inherit;
 		right: 0.7rem;
 	}
-}
\ No newline at end of file
+}
diff --git a/platforms/common/js/main.js b/platforms/common/js/main.js
index 86024c0f8..3101ba266 100644
--- a/platforms/common/js/main.js
+++ b/platforms/common/js/main.js
@@ -15328,6 +15328,9 @@ var toString = require('../lang/toString');
     };
 
     var _each = function (arr, iterator) {
+        if (arr.forEach) {
+            return arr.forEach(iterator);
+        }
         for (var i = 0; i < arr.length; i += 1) {
             iterator(arr[i], i, arr);
         }
@@ -16104,26 +16107,23 @@ var toString = require('../lang/toString');
             pause: function () {
                 if (q.paused === true) { return; }
                 q.paused = true;
+                q.process();
             },
             resume: function () {
                 if (q.paused === false) { return; }
                 q.paused = false;
-                // Need to call q.process once per concurrent
-                // worker to preserve full concurrency after pause
-                for (var w = 1; w <= q.concurrency; w++) {
-                    async.setImmediate(q.process);
-                }
+                q.process();
             }
         };
         return q;
     };
-
+    
     async.priorityQueue = function (worker, concurrency) {
-
+        
         function _compareTasks(a, b){
           return a.priority - b.priority;
         };
-
+        
         function _binarySearch(sequence, item, compare) {
           var beg = -1,
               end = sequence.length - 1;
@@ -16137,7 +16137,7 @@ var toString = require('../lang/toString');
           }
           return beg;
         }
-
+        
         function _insert(q, data, priority, callback) {
           if (!q.started){
             q.started = true;
@@ -16159,7 +16159,7 @@ var toString = require('../lang/toString');
                   priority: priority,
                   callback: typeof callback === 'function' ? callback : null
               };
-
+              
               q.tasks.splice(_binarySearch(q.tasks, item, _compareTasks) + 1, 0, item);
 
               if (q.saturated && q.tasks.length === q.concurrency) {
@@ -16168,15 +16168,15 @@ var toString = require('../lang/toString');
               async.setImmediate(q.process);
           });
         }
-
+        
         // Start with a normal queue
         var q = async.queue(worker, concurrency);
-
+        
         // Override push to accept second parameter representing priority
         q.push = function (data, priority, callback) {
           _insert(q, data, priority, callback);
         };
-
+        
         // Remove unshift function
         delete q.unshift;
 
@@ -24581,7 +24581,7 @@ var pseudos = {
     },
 
     'not': function(expression){
-        return !slick.matches(this, expression)
+        return !slick.match(this, expression)
     },
 
     'contains': function(text){
diff --git a/themes/hydrogen/common/scss/hydrogen/_offcanvas.scss b/themes/hydrogen/common/scss/hydrogen/_offcanvas.scss
index b24423e61..4dcd67ee4 100644
--- a/themes/hydrogen/common/scss/hydrogen/_offcanvas.scss
+++ b/themes/hydrogen/common/scss/hydrogen/_offcanvas.scss
@@ -30,7 +30,7 @@
 	color: $offcanvas-toggle-color;
 }
 
-// Mobile Menu 
+// Mobile Menu
 #g-offcanvas {
 	#g-mobilemenu-container {
 		ul {
@@ -42,7 +42,7 @@
 				&:not(.g-menu-item-type-particle):not(.g-menu-item-type-module) {
 					&:hover, &.active {
 						background: darken($accent-color-1, 4%);
-						
+
 						> .g-menu-item-container {
 							color: $offcanvas-text-color;
 						}
@@ -65,7 +65,7 @@
 			}
 			.g-dropdown-column {
 				width: $offcanvas-width;
-			}			
+			}
 		}
 	}
 }
@@ -79,4 +79,18 @@
 		background: #fff !important;
 		color: #000 !important;
 	}
-}
\ No newline at end of file
+}
+
+.g-offcanvas-open {
+    .g-offcanvas-left {
+        #g-page-surround {
+            margin-left: $offcanvas-width;
+        }
+    }
+
+    .g-offcanvas-right {
+        #g-page-surround {
+            margin-right: $offcanvas-width;
+        }
+    }
+}