diff --git a/frappe/public/build.json b/frappe/public/build.json
index ccb37bd202..310f51abbb 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -128,7 +128,6 @@
 		"public/js/frappe/ui/toolbar/awesome_bar.js",
 		"public/js/frappe/ui/toolbar/about.js",
 		"public/js/frappe/ui/toolbar/navbar.html",
-		"public/js/frappe/ui/toolbar/offcanvas_left_sidebar.html",
 		"public/js/frappe/ui/toolbar/toolbar.js",
 		"public/js/frappe/ui/toolbar/notifications.js",
 		"public/js/frappe/views/communication.js",
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index 8c47d38318..ca262cdaf6 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -1,137 +1,3 @@
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
-@media (max-width: 767px) {
-  .page-content {
-    min-height: 200px;
-  }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
-  .offcanvas .navbar-form {
-    margin: 0px;
-  }
-  .offcanvas .sidebar ul {
-    margin: 0px;
-  }
-  .offcanvas .sidebar-page-sidebar {
-    border-top: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-label {
-    text-transform: uppercase;
-    color: #8D99A6;
-    font-size: 85%;
-    margin: 0px;
-    font-weight: bold;
-    padding: 10px 15px 0px;
-  }
-}
 .navbar .dropdown-toggle {
   padding-top: 8px;
   padding-bottom: 8px;
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index de6b36e7e4..556884f9ae 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -3,57 +3,12 @@ html {
 }
 body {
   height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
   margin: 0px;
   padding: 0px !important;
 }
 html,
 body {
   overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
 }
 @media (max-width: 991px) {
   .intro-area,
@@ -130,61 +85,6 @@ body {
   .navbar-nav {
     margin: 0px;
   }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
   .sidebar .form-group {
     margin-bottom: 0px;
   }
diff --git a/frappe/public/css/offcanvas-website.css b/frappe/public/css/offcanvas-website.css
index 4a3502232b..dd10c4ae29 100644
--- a/frappe/public/css/offcanvas-website.css
+++ b/frappe/public/css/offcanvas-website.css
@@ -1,134 +1,2 @@
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
 @media (max-width: 767px) {
-  .page-content {
-    min-height: 200px;
-  }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
-  .offcanvas .navbar-form {
-    margin: 0px;
-  }
-  .offcanvas .sidebar ul {
-    margin: 0px;
-  }
-  .offcanvas .sidebar-page-sidebar {
-    border-top: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-label {
-    text-transform: uppercase;
-    color: #8D99A6;
-    font-size: 85%;
-    margin: 0px;
-    font-weight: bold;
-    padding: 10px 15px 0px;
-  }
 }
diff --git a/frappe/public/css/offcanvas.css b/frappe/public/css/offcanvas.css
index 850f6feb85..e69de29bb2 100644
--- a/frappe/public/css/offcanvas.css
+++ b/frappe/public/css/offcanvas.css
@@ -1,57 +0,0 @@
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index 5c58f3fb02..f742029c2b 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -3,61 +3,19 @@ html {
 }
 body {
   height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
   margin: 0px;
   padding: 0px !important;
 }
 html,
 body {
   overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
 }
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
+.hide-form-sidebar .form-sidebar {
+  display: none !important;
 }
 .sidebar-padding {
   padding: 12px 14px;
 }
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
-.hide-form-sidebar .form-sidebar {
-  display: none !important;
-}
 body[data-route=""] .main-menu .desk-sidebar,
 body[data-route="desk"] .main-menu .desk-sidebar {
   display: block !important;
diff --git a/frappe/public/css/website.css b/frappe/public/css/website.css
index 9d19b7ce02..c0cad574aa 100644
--- a/frappe/public/css/website.css
+++ b/frappe/public/css/website.css
@@ -764,140 +764,6 @@ a.active {
 .docs-attr-desc {
   padding-left: 30px;
 }
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.offcanvas-main-section-overlay {
-  display: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.sidebar-padding {
-  padding: 12px 14px;
-}
-.offcanvas .sidebar .sidebar-menu > li > .btn-group,
-.offcanvas .sidebar .sidebar-menu > li > a,
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding: 12px 14px;
-  display: block;
-  whitespace: nowrap;
-  transition: 0.2s;
-  text-decoration: none !important;
-}
-.offcanvas .sidebar .dropdown-menu {
-  padding: 0px;
-  font-size: inherit;
-}
-.offcanvas .sidebar .dropdown-menu > li > a {
-  padding-left: 28px;
-}
-.offcanvas .sidebar .divider {
-  height: 1px;
-  overflow: hidden;
-  background-color: #EBEFF2;
-  width: 100%;
-  margin: 0px;
-}
-.offcanvas .sidebar .badge {
-  right: 15px !important;
-  top: 11px !important;
-}
-.offcanvas .sidebar .sidebar-menu > li > a:hover,
-.offcanvas .sidebar .dropdown-menu > li > a:hover,
-.offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .dropdown-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active,
-.offcanvas .sidebar .dropdown-menu > li > a:active {
-  background-color: #F0F4F7;
-}
-@media (max-width: 767px) {
-  .page-content {
-    min-height: 200px;
-  }
-  .offcanvas {
-    transition: 0.25s;
-  }
-  .offcanvas-main-section-overlay {
-    bottom: 0;
-    position: fixed;
-  }
-  .offcanvas-container,
-  .offcanvas,
-  .offcanvas-main-section {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-  .offcanvas.active-left,
-  .offcanvas.active-right {
-    position: fixed;
-  }
-  .offcanvas.active-left .offcanvas-main-section-overlay,
-  .offcanvas.active-right .offcanvas-main-section-overlay {
-    z-index: 1031;
-    display: block;
-    bottom: 0;
-  }
-  .offcanvas.active-left {
-    -webkit-transform: translate3d(75%, 0, 0);
-    transform: translate3d(75%, 0, 0);
-  }
-  .offcanvas.active-right {
-    -webkit-transform: translate3d(-75%, 0, 0);
-    transform: translate3d(-75%, 0, 0);
-  }
-  .offcanvas .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    /* 9 columns */
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 12px;
-  }
-  .offcanvas .sidebar-right {
-    left: 100%;
-    border-left: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-left {
-    right: 100%;
-    border-right: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-menu {
-    margin-bottom: 0;
-  }
-  .offcanvas .navbar-form {
-    margin: 0px;
-  }
-  .offcanvas .sidebar ul {
-    margin: 0px;
-  }
-  .offcanvas .sidebar-page-sidebar {
-    border-top: 1px solid #d1d8dd;
-  }
-  .offcanvas .sidebar-label {
-    text-transform: uppercase;
-    color: #8D99A6;
-    font-size: 85%;
-    margin: 0px;
-    font-weight: bold;
-    padding: 10px 15px 0px;
-  }
-}
 @media (min-width: 768px) {
   .login-wrapper {
     border-right: 1px solid #f2f2f2;
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index 7054898e53..3789d7995a 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -18,14 +18,14 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 
 			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
 
-			var offcanvas_container = $('body').find('.offcanvas-container');
-			offcanvas_container.css("overflow-y", "hidden");
+			var scroll_container = $('html');
+			scroll_container.css("overflow-y", "hidden");
 
 			layout_side_section.find(".close-sidebar").on('click', close_sidebar);
 			layout_side_section.on("click", "a", close_sidebar);
 
 			function close_sidebar(e) {
-				offcanvas_container.css("overflow-y", "visible");
+				scroll_container.css("overflow-y", "");
 
 				layout_side_section.find(".close-sidebar").fadeOut(function() {
 					overlay_sidebar.removeClass('opened').find('.dropdown-toggle').removeClass('text-muted');
diff --git a/frappe/public/less/docs.less b/frappe/public/less/docs.less
index be8497a083..14d4baa3d3 100644
--- a/frappe/public/less/docs.less
+++ b/frappe/public/less/docs.less
@@ -1,5 +1,4 @@
 @import "variables.less";
-@import "offcanvas-website.less";
 @import "navbar.less";
 
 body {
@@ -391,15 +390,6 @@ a.edit, a.edit:hover, a.edit:focus, a.edit:visited, .edit-container .icon {
  font-size:16px;
 }
 
-// @media (max-width: 767px) {
-//   .offcanvas-container,
-//   .offcanvas,
-//   .offcanvas-main-section {
-//     position: relative;
-//    width:50%;
-//   }
-// }
-
 .hero-and-content [data-html-block="hero"] {
 	overflow-y: hidden;
 }
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 0d774cf5bb..3a93b0c954 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -1,6 +1,21 @@
 @import "variables.less";
 @import "mixins.less";
-@import "offcanvas.less";
+
+html {
+	min-height: 100%;
+}
+
+body {
+	height: 100%;
+	 // The html and body elements cannot have any padding or margin. 
+	margin: 0px;
+	padding: 0px !important;
+}
+
+html,
+body {
+	overflow-x: hidden;  //Prevent scroll on narrow devices 
+}
 
 @media(max-width: 991px) {
 	.intro-area,
@@ -99,8 +114,6 @@
 		margin: 0px;
 	}
 
-	.offcanvas-mobile-mixin();
-
 	.sidebar .form-group {
 		margin-bottom: 0px;
 	}
diff --git a/frappe/public/less/offcanvas-website.less b/frappe/public/less/offcanvas-website.less
deleted file mode 100644
index b30b56e2c4..0000000000
--- a/frappe/public/less/offcanvas-website.less
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "offcanvas.less";
-
-@media (max-width: 767px) {
-	.page-content {
-		min-height: 200px;
-	}
-
-	.offcanvas-mobile-mixin();
-
-	.offcanvas {
-		.navbar-form {
-			margin: 0px;
-		}
-		.sidebar ul {
-			margin: 0px;
-		}
-
-		.sidebar-page-sidebar {
-			border-top: 1px solid @border-color;
-		}
-
-		.sidebar-label {
-			text-transform: uppercase;
-			color: @text-muted;
-			font-size: 85%;
-			margin: 0px;
-			font-weight: bold;
-			padding: 10px 15px 0px;
-		}
-	}
-}
diff --git a/frappe/public/less/offcanvas.less b/frappe/public/less/offcanvas.less
deleted file mode 100644
index 7883c6f0b7..0000000000
--- a/frappe/public/less/offcanvas.less
+++ /dev/null
@@ -1,138 +0,0 @@
-@import "variables.less";
-
-html {
-	min-height: 100%;
-}
-
-body {
-	height: 100%;
-	/* The html and body elements cannot have any padding or margin. */
-	margin: 0px;
-	padding: 0px !important;
-}
-
-html,
-body {
-	overflow-x: hidden; /* Prevent scroll on narrow devices */
-}
-
-.offcanvas-main-section-overlay {
-	display: none;
-	cursor: pointer;
-	opacity: 0.5;
-}
-
-.sidebar-padding {
-	padding: 12px 14px;
-}
-
-.offcanvas .sidebar {
-	.sidebar-menu > li > .btn-group,
-	.sidebar-menu > li > a,
-	.dropdown-menu > li > a {
-		.sidebar-padding;
-		display: block;
-		whitespace: nowrap;
-		transition: 0.2s;
-		text-decoration: none !important;
-	}
-
-	.dropdown-menu {
-		padding: 0px;
-		font-size: inherit;
-	}
-
-	.dropdown-menu > li > a {
-		padding-left: 28px;
-	}
-
-	.divider {
-	    height: 1px;
-	    overflow: hidden;
-	    background-color: @navbar-default-border;
-		width: 100%;
-		margin: 0px;
-	}
-
-	.badge {
-		right: 15px !important;
-		top: 11px !important;
-	}
-}
-
-.offcanvas .sidebar .sidebar-menu > li > a&,
-.offcanvas .sidebar .dropdown-menu > li > a& {
-	&:hover,
-	&:focus,
-	&:active {
-		background-color: @btn-bg;
-	}
-}
-
-.offcanvas-mobile-mixin() {
-	.offcanvas {
-		transition: 0.25s;
-	}
-
-	.offcanvas-main-section-overlay {
-		bottom: 0;
-		position: fixed;
-	}
-
-	.offcanvas-container,
-	.offcanvas,
-	.offcanvas-main-section {
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
-	}
-
-	.offcanvas.active-left,
-	.offcanvas.active-right {
-		position: fixed;
-	}
-
-	.offcanvas.active-left .offcanvas-main-section-overlay,
-	.offcanvas.active-right .offcanvas-main-section-overlay {
-		z-index: 1031;
-		display: block;
-		bottom: 0;
-	}
-
-	.offcanvas.active-left {
-		-webkit-transform: translate3d(75%, 0, 0);
-		transform: translate3d(75%, 0, 0);
-	}
-
-	.offcanvas.active-right {
-		-webkit-transform: translate3d(-75%, 0, 0);
-		transform: translate3d(-75%, 0, 0);
-	}
-
-	.offcanvas .sidebar {
-		position: fixed;
-		// position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 75%; /* 9 columns */
-		overflow-x: hidden;
-		overflow-y: auto;
-		font-size: 12px;
-	}
-
-	.offcanvas .sidebar-right {
-		left: 100%;
-		border-left: 1px solid @border-color;
-	}
-
-	.offcanvas .sidebar-left {
-		right: 100%;
-		border-right: 1px solid @border-color;
-	}
-
-	.offcanvas .sidebar-menu {
-		margin-bottom: 0;
-	}
-}
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 8f61b576a4..2baae84691 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -1,6 +1,21 @@
 @import "variables.less";
 @import "mixins.less";
-@import "offcanvas.less";
+
+html {
+	min-height: 100%;
+}
+
+body {
+	height: 100%;
+	 // The html and body elements cannot have any padding or margin. 
+	margin: 0px;
+	padding: 0px !important;
+}
+
+html,
+body {
+	overflow-x: hidden;  //Prevent scroll on narrow devices 
+}
 
 .hide-form-sidebar {
 	.form-sidebar {
@@ -8,6 +23,10 @@
 	}
 }
 
+.sidebar-padding {
+	padding: 12px 14px;
+}
+
 body[data-route=""] .main-menu,
 body[data-route="desk"] .main-menu {
 	.desk-sidebar {
diff --git a/frappe/public/less/website.less b/frappe/public/less/website.less
index 1d6a5edd45..b481121221 100644
--- a/frappe/public/less/website.less
+++ b/frappe/public/less/website.less
@@ -496,8 +496,6 @@ a.active {
 	padding-left: 30px;
 }
 
-@import "offcanvas-website.less";
-
 @media (min-width: 768px) {
 	.login-wrapper {
 		border-right: 1px solid #f2f2f2;
diff --git a/frappe/templates/autodoc/base_template.html b/frappe/templates/autodoc/base_template.html
index bf1bdca4dc..c04161dea6 100644
--- a/frappe/templates/autodoc/base_template.html
+++ b/frappe/templates/autodoc/base_template.html
@@ -36,66 +36,62 @@
 	{%- endblock -%}
 </head>
 <body data-path="{{ path }}">
-	<div class="offcanvas-container">
-		<div class="offcanvas">
-			<div class="offcanvas-main-section">
-				<div>
-					{%- block banner -%}
-					{% include "templates/includes/banner_extension.html" ignore missing %}
-						{% if banner_html -%}
-						<header class="container">{{ banner_html or "" }}</header>
-						{%- endif %}
-					{%- endblock -%}
+	<div class="main-section">
+		<div>
+			{%- block banner -%}
+			{% include "templates/includes/banner_extension.html" ignore missing %}
+				{% if banner_html -%}
+				<header class="container">{{ banner_html or "" }}</header>
+				{%- endif %}
+			{%- endblock -%}
 
-					{%- block navbar -%}
-                        {% include "templates/includes/navbar/navbar.html" %}
-                    {%- endblock -%}
-                    <div class="hero-and-content">
-                        <div data-html-block="hero">
-    					{%- block hero -%}{%- endblock -%}
-                        </div>
-                        <div class="container" data-html-block="content">
-                        {% block content %}{% endblock %}
-						<!-- edit-link -->
-                        </div>
-                    </div>
-					<footer class="docs-footer">
-						<div class="container">
-						{%- if footer is defined -%}{{ footer }}{%- endif -%}
+			{%- block navbar -%}
+                {% include "templates/includes/navbar/navbar.html" %}
+            {%- endblock -%}
+            <div class="hero-and-content">
+                <div data-html-block="hero">
+				{%- block hero -%}{%- endblock -%}
+                </div>
+                <div class="container" data-html-block="content">
+                {% block content %}{% endblock %}
+				<!-- edit-link -->
+                </div>
+            </div>
+			<footer class="docs-footer">
+				<div class="container">
+				{%- if footer is defined -%}{{ footer }}{%- endif -%}
 
-                        <div class="built-with-frappe text-center">
-                            <img class="frappe-bird" src="{{ docs_base_url }}/assets/img/frappe-bird-grey.svg">
-                            <h3>By {{ app.publisher }}</h3>
-                        </div>
-                        <div class="text-center">
-                            <ul class="list-unstyled">
-                                <li>
-                                    <a href="{{ app.source_link }}">
-                                    Source</a>
-                                </li>
-                                <li>
-                                    <a href="{{ app.source_link }}/issues">
-                                    Issues</a>
-                                </li>
-                                <li>
-                                    <a href="{{ docs_base_url }}/license.html">
-                                    License</a>
-                                </li>
-                                <li>
-                                    <a href="https://discuss.erpnext.com">
-                                    Forum</a>
-                                </li>
-                                <li>
-                                    <a href="https://frappe.io/apps">
-                                    Frappe Apps</a>
-                                </li>
-                            </ul>
-                        </div>
+                <div class="built-with-frappe text-center">
+                    <img class="frappe-bird" src="{{ docs_base_url }}/assets/img/frappe-bird-grey.svg">
+                    <h3>By {{ app.publisher }}</h3>
+                </div>
+                <div class="text-center">
+                    <ul class="list-unstyled">
+                        <li>
+                            <a href="{{ app.source_link }}">
+                            Source</a>
+                        </li>
+                        <li>
+                            <a href="{{ app.source_link }}/issues">
+                            Issues</a>
+                        </li>
+                        <li>
+                            <a href="{{ docs_base_url }}/license.html">
+                            License</a>
+                        </li>
+                        <li>
+                            <a href="https://discuss.erpnext.com">
+                            Forum</a>
+                        </li>
+                        <li>
+                            <a href="https://frappe.io/apps">
+                            Frappe Apps</a>
+                        </li>
+                    </ul>
+                </div>
 
-                    </div>
-					</footer>
-				</div>
-			</div>
+            </div>
+			</footer>
 		</div>
 	</div>
 
diff --git a/frappe/templates/base.html b/frappe/templates/base.html
index 6e78686b26..383d230f22 100644
--- a/frappe/templates/base.html
+++ b/frappe/templates/base.html
@@ -46,40 +46,36 @@
     </script>
 </head>
 <body data-path="{{ path }}">
-	<div class="offcanvas-container">
-		<div class="offcanvas">
-			<div class="offcanvas-main-section">
-				<div>
-					{%- block banner -%}
-					{% include "templates/includes/banner_extension.html" ignore missing %}
-						{% if banner_html -%}
-						<header class="container">{{ banner_html or "" }}</header>
-						{%- endif %}
-					{%- endblock -%}
+	<div class="main-section">
+		<div>
+			{%- block banner -%}
+			{% include "templates/includes/banner_extension.html" ignore missing %}
+				{% if banner_html -%}
+				<header class="container">{{ banner_html or "" }}</header>
+				{%- endif %}
+			{%- endblock -%}
 
-					{%- block navbar -%}
-                        {% include "templates/includes/navbar/navbar.html" %}
-                    {%- endblock -%}
-                    <div class="hero-and-content">
-                        <div data-html-block="hero">
-    					{%- block hero -%}{%- endblock -%}
-                        </div>
-                        <div class="container" data-html-block="content">
-                        {% block content %}{% endblock %}
-                        </div>
-                    </div>
-					{%- if footer is defined -%}
-					<footer class="page-footer">
-						<div class="container">
-							{{ footer }}
-						</div>
-					</footer>
-					{%- endif -%}
+			{%- block navbar -%}
+                {% include "templates/includes/navbar/navbar.html" %}
+            {%- endblock -%}
+            <div class="hero-and-content">
+                <div data-html-block="hero">
+				{%- block hero -%}{%- endblock -%}
+                </div>
+                <div class="container" data-html-block="content">
+                {% block content %}{% endblock %}
+                </div>
+            </div>
+			{%- if footer is defined -%}
+			<footer class="page-footer">
+				<div class="container">
+					{{ footer }}
 				</div>
-				<div>
-					{%- block footer -%}{% include "templates/includes/footer/footer.html" %}{%- endblock -%}
-				</div>
-			</div>
+			</footer>
+			{%- endif -%}
+		</div>
+		<div>
+			{%- block footer -%}{% include "templates/includes/footer/footer.html" %}{%- endblock -%}
 		</div>
 	</div>
 
diff --git a/frappe/www/desk.html b/frappe/www/desk.html
index 410a639750..3bd4e8375f 100644
--- a/frappe/www/desk.html
+++ b/frappe/www/desk.html
@@ -22,14 +22,10 @@
 	<div class="centered splash" style="width: 200px; height: 200px;">
         <img src="{{ splash_image or "/assets/frappe/images/frappe-bird-thin.svg" }}">
     </div>
-	<div class="offcanvas-container">
-		<div class="offcanvas">
-			<div class="offcanvas-main-section">
-				<header></header>
-				<div id="body_div"></div>
-				<footer></footer>
-			</div>
-		</div>
+	<div class="main-section">
+		<header></header>
+		<div id="body_div"></div>
+		<footer></footer>
 	</div>
 
 	<!-- hack! load background image asap, before desktop is rendered -->