diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 8328f3f55..8fde75299 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -3,19 +3,17 @@ layout: base
 ---
 
 <div class="layout d-flex flex-row h-100p">
-   {% if page.nav-side %}
-   {% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
+   {% if page.sidenav %}
+   {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded right=page.sidenav-right class=page.sidenav-class %}
    {% endif %}
 
-   {% include layout/sidenav.html class=page.side-class dark=true %}
+   <div class="sidenav-overlay" data-toggle="sidenav"></div>
 
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
-      {% comment %}
-      {% unless page.nav-side %}
+      {% unless page.sidenav %}
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
       {% include layout/topmenu.html %}
       {% endunless %}
-      {% endcomment %}
 
       <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
          {% include layout/page-title.html %}
diff --git a/pages/layout-navbar-dark.html b/pages/layout-navbar-dark.html
index f453afffb..84ae07118 100644
--- a/pages/layout-navbar-dark.html
+++ b/pages/layout-navbar-dark.html
@@ -1,7 +1,7 @@
 ---
 title: Sidebar white
 menu: layout.sidebar-white
-nav-side: true
+sidenav: true
 nav-dark: true
 page-title: Dashboard
 menu: layouts
diff --git a/pages/layout-navbar-folded.html b/pages/layout-navbar-folded.html
index 85645a513..b26e4f747 100644
--- a/pages/layout-navbar-folded.html
+++ b/pages/layout-navbar-folded.html
@@ -1,7 +1,7 @@
 ---
 title: Folded sidebar
 menu: layout.sidebar-folded
-nav-side: true
+sidenav: true
 nav-folded: true
 nav-dark: true
 page-title: Dashboard
diff --git a/pages/layout-navbar-left.html b/pages/layout-navbar-left.html
index b6d1726ce..c293253b3 100644
--- a/pages/layout-navbar-left.html
+++ b/pages/layout-navbar-left.html
@@ -1,7 +1,7 @@
 ---
 title: Sidebar left
 menu: layout.sidebar-left
-nav-side: true
+sidenav: true
 page-title: Dashboard
 menu: layouts
 ---
diff --git a/pages/layout-navbar-right.html b/pages/layout-navbar-right.html
index a5596797b..9adf41a46 100644
--- a/pages/layout-navbar-right.html
+++ b/pages/layout-navbar-right.html
@@ -1,7 +1,7 @@
 ---
 title: Sidebar right
 menu: layout.sidebar-right
-nav-side: true
+sidenav: true
 nav-right: true
 page-title: Dashboard
 menu: layouts
diff --git a/pages/layout-test.html b/pages/layout-test.html
index 2df066a83..ab5eca4f3 100644
--- a/pages/layout-test.html
+++ b/pages/layout-test.html
@@ -1,12 +1,42 @@
 ---
 title: Layout test
-side-class: sidenav-expanded-xl sidenav-folded-lg
+sidenav-class: sidenav-expanded-xl sidenav-folded-md
+sidenav: true
+sidenav-dark: true
 ---
 
 <div class="card" id="card-test">
    <div class="card-body">
-      <a href="#" class="btn btn-secondary btn-block" id="toggle-sidebar">sidebar</a>
+      <a href="#" class="btn btn-secondary btn-block" data-toggle="sidenav">sidebar</a>
       <div id="card-body"></div>
+      <div>
+         <h1>Well, she turned me into a newt.</h1>
+         <p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
+         <p>And this isn't my nose. This is a false one. But you are dressed as one… Oh, ow! I don't want to talk to you no more, you empty-headed animal food trough water! <strong> I fart in your general direction!</strong> <em> Your mother was a hamster and your father smelt of elderberries!</em> Now leave before I am forced to taunt you a second time!</p>
+         <h2>Burn her!</h2>
+         <p>We shall say 'Ni' again to you, if you do not appease us. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
+         <ol>
+            <li>Oh, ow!</li><li>Be quiet!</li><li>Well, we did do the nose.</li>
+         </ol>
+
+         <h3>What a strange person.</h3>
+         <p>Well, she turned me into a newt. And the hat. She's a witch! Well, how'd you become king, then? She looks like one. Look, my liege!</p>
+         <ul>
+            <li>We found them.</li><li>Well, how'd you become king, then?</li><li>Did you dress her up like this?</li>
+         </ul>
+
+         <p>It's only a model. I'm not a witch. Who's that then? Did you dress her up like this? Look, my liege!</p>
+         <p>Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
+         <p>Oh, ow! Look, my liege! Burn her! You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Well, Mercia's a temperate zone!</p>
+         <p>Well, how'd you become king, then? How do you know she is a witch? We shall say 'Ni' again to you, if you do not appease us. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you!</p>
+         <p>Look, my liege! I dunno. Must be a king. A newt? What do you mean? Oh, ow! He hasn't got shit all over him.</p>
+         <p>Now, look here, my good man. She looks like one. And this isn't my nose. This is a false one. Bring her forward!</p>
+         <p>You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Camelot! Well, how'd you become king, then? Why?</p>
+         <p>And the hat. She's a witch! It's only a model. Well, how'd you become king, then? Well, I didn't vote for you. Why?</p>
+         <p>Ni! Ni! Ni! Ni! Ni! Ni! Ni! Ni! Camelot! We shall say 'Ni' again to you, if you do not appease us. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
+         <p>Why do you think that she is a witch? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Where'd you get the coconuts? …Are you suggesting that coconuts migrate?</p>
+         <p>Well, what do you want? Did you dress her up like this? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. On second thoughts, let's not go there. It is a silly place.</p>
+      </div>
    </div>
 </div>
 
@@ -25,7 +55,7 @@ side-class: sidenav-expanded-xl sidenav-folded-lg
 			test_width();
 		});
 
-		$('#toggle-sidebar').on('click', function () {
+		$('[data-toggle="sidenav"]').on('click', function () {
          $('body').toggleClass('show-sidenav');
 		});
 	});
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5d4ee6c2f..1873c934a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -281,7 +281,7 @@ $pagination-disabled-color: rgba($text-muted, .5) !default;
 $sidenav-width: 16rem !default;
 $sidenav-folded-width: 4rem !default;
 $sidenav-bg: $white !default;
-$sidenav-border-color: $border-color !default;
+$sidenav-border-color: $border-color-alpha !default;
 $sidenav-dark-bg: $dark !default;
 $sidenav-link-padding-x: .75rem !default;
 
diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss
index a33d939df..d2683b3bf 100644
--- a/scss/layout/_core.scss
+++ b/scss/layout/_core.scss
@@ -5,7 +5,7 @@ html {
 }
 
 body {
-  height: 100%;
+  min-height: 100%;
   overflow-y: scroll;
   letter-spacing: $body-letter-spacing;
   touch-action: manipulation;
@@ -27,6 +27,11 @@ body *:hover::-webkit-scrollbar-thumb {
   background: $gray-500;
 }
 
+.layout {
+  position: relative;
+  outline: 1px solid red;
+}
+
 /**
 Remove the cancel buttons in Chrome and Safari on macOS.
  */
diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss
index 9ab8bfaa0..5f9dd3cce 100644
--- a/scss/layout/_sidenav.scss
+++ b/scss/layout/_sidenav.scss
@@ -3,8 +3,23 @@ $sidenav-padding-y: 1rem;
 $sidenav-active-color: $primary;
 $breakpoints: $grid-breakpoints;
 
+@mixin sidenav-overlay {
+  display: none;
+
+  body.show-sidenav & {
+    display: block;
+    position: fixed;
+    z-index: $zindex-fixed - 1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba($dark, .1);
+  }
+}
+
 @mixin sidenav-base {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
@@ -14,7 +29,8 @@ $breakpoints: $grid-breakpoints;
   transition: .3s opacity, .3s transform;
   will-change: transform;
 
-  @include sidenav-expanded;
+  width: $sidenav-width;
+  min-width: $sidenav-width;
 
   body.show-sidenav & {
     @include sidenav-visible-common;
@@ -27,9 +43,18 @@ $breakpoints: $grid-breakpoints;
 }
 
 @mixin sidenav-expanded {
+  @include sidenav-visible-common;
   width: $sidenav-width;
   min-width: $sidenav-width;
 
+  & ~ .layout-main {
+    padding-left: $sidenav-width;
+  }
+
+  & ~ .sidenav-overlay {
+    display: none !important;
+  }
+
   &:before {
     content: 'sidenav'
   }
@@ -40,6 +65,14 @@ $breakpoints: $grid-breakpoints;
   width: $sidenav-folded-width;
   min-width: $sidenav-folded-width;
 
+  & ~ .layout-main {
+    padding-left: $sidenav-folded-width;
+  }
+
+  & ~ .sidenav-overlay {
+    display: none !important;
+  }
+
   &:before {
     content: 'sidenav-folded'
   }
@@ -67,8 +100,6 @@ Sidebar
 
   box-shadow: 1px 0 $sidenav-border-color;
 
-
-
   /*
   Right navbar
    */
@@ -78,6 +109,10 @@ Sidebar
   }
 }
 
+.sidenav-overlay {
+  @include sidenav-overlay;
+}
+
 /*
 Folded navbar
  */