diff --git a/js/theme.js b/js/theme.js
index 30a22872e..c740a4880 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -12,7 +12,15 @@ function ThemeNav () {
         winPosition: 0,
         winHeight: null,
         docHeight: null,
-        isRunning: false
+        isRunning: false,
+        sidebarSwipe: {
+            startX: null,
+            endX: null,
+            allowedTime: 300,
+            requiredDistance: 150,
+            elapsedTime: null,
+            startTime: null
+        }
     };
 
     nav.enable = function (withStickyNav) {
@@ -97,6 +105,31 @@ function ThemeNav () {
             .on('click', "[data-toggle='rst-current-version']", function() {
                 $("[data-toggle='rst-versions']").toggleClass("shift-up");
             })
+            .on('touchstart', ".wy-body-for-nav", function(event) {
+                if (event.touches.length === 1) {
+                    self.sidebarSwipe.startX = event.touches.item(0).clientX;
+                    self.sidebarSwipe.startTime = new Date().getTime()
+                } else {
+                    self.sidebarSwipe.startX = null;
+                }
+            })
+            .on('touchend', ".wy-body-for-nav", function(event) {
+                if (self.sidebarSwipe.startX !== null) {
+                    self.sidebarSwipe.endX = event.changedTouches.item(0).clientX;
+                    self.sidebarSwipe.elapsedTime = self.sidebarSwipe.startTime - new Date().getTime()
+                    if (self.sidebarSwipe.elapsedTime <= self.sidebarSwipe.allowedTime) {
+                        if (self.sidebarSwipe.endX > self.sidebarSwipe.startX + self.sidebarSwipe.requiredDistance) {
+                            document.querySelector('.wy-nav-side').classList.add('shift');
+                            document.querySelector('.wy-nav-content-wrap').classList.add('shift');
+                        }
+
+                        if (self.sidebarSwipe.endX < self.sidebarSwipe.startX - self.sidebarSwipe.requiredDistance) {
+                            document.querySelector('.wy-nav-side').classList.remove('shift');
+                            document.querySelector('.wy-nav-content-wrap').classList.remove('shift');
+                        }
+                    }
+                }
+            })
 
         // Make tables responsive
         $("table.docutils:not(.field-list,.footnote,.citation)")
diff --git a/sass/_theme_badge.sass b/sass/_theme_badge.sass
index 93659f493..b1a605d76 100644
--- a/sass/_theme_badge.sass
+++ b/sass/_theme_badge.sass
@@ -87,6 +87,8 @@
 +media($tablet)
   .rst-versions
     width: 85%
-    display: none
+    @include prefixer(transform, $sidebar-transform-hide, webkit moz ms o spec)
+    @include prefixer(transition, $sidebar-transition, webkit moz ms o spec)
     &.shift
       display: block
+      @include prefixer(transform, $sidebar-transform-show, webkit moz ms o spec)
diff --git a/sass/_theme_layout.sass b/sass/_theme_layout.sass
index 17577e67a..387610096 100644
--- a/sass/_theme_layout.sass
+++ b/sass/_theme_layout.sass
@@ -257,6 +257,7 @@ html
   position: absolute
   width: 100%
   height: 100%
+  overflow-x: hidden
 
 .wy-nav-side
   position: fixed
@@ -373,12 +374,15 @@ footer
     display: block
   .wy-nav-side
     @if $nav-desktop-position == left
-      left: -$nav-desktop-width
+      width: 85%
+      @include prefixer(transform, $sidebar-transform-hide, webkit moz ms o spec)
+      @include prefixer(transition, $sidebar-transition, webkit moz ms o spec)
     @else
       right: -$nav-desktop-width
     &.shift
-      width: 85%
       left: 0
+      @include prefixer(transform, $sidebar-transform-show, webkit moz ms o spec)
+      @include prefixer(transition, $sidebar-transition, webkit moz ms o spec)
   .wy-side-scroll
     width: auto
   .wy-side-nav-search
@@ -387,15 +391,17 @@ footer
     width: auto
   .wy-nav-content-wrap
     margin-left: 0
+    @include prefixer(transform, $sidebar-transform-show, webkit moz ms o spec)
+    @include prefixer(transition, $sidebar-transition, webkit moz ms o spec)
     .wy-nav-content
       padding: $gutter
     &.shift
       position: fixed
       min-width: 100%
-      left: 85%
       top: 0
       height: 100%
       overflow: hidden
+      @include prefixer(transform, translateX(85%), webkit moz ms o spec)
 
 @media screen and (min-width: $nav-media-query)
   .wy-nav-content-wrap
diff --git a/sass/_theme_variables.sass b/sass/_theme_variables.sass
index b4f091525..635c08544 100644
--- a/sass/_theme_variables.sass
+++ b/sass/_theme_variables.sass
@@ -53,6 +53,11 @@ $nav-link-color-hover:                lighten($nav-link-color, 6%) !default
 $nav-link-color-alt:                  hsl(33, 100%, 51%)
 $nav-caption:                         desaturate($blue, 15%)
 
+// Sidebar
+$sidebar-transform-hide:              translateX(-100%)
+$sidebar-transform-show:              translateX(0%)      
+$sidebar-transition:                  transform 0.3s ease
+
 // Sidebar colors
 $sidebar-background-color:            $table-stripe-color
 $sidebar-border-color:                $table-border-color