diff --git a/docs/examples/dashboard/example.js b/docs/examples/dashboard/example.js
index 2da9981a..da8fda30 100644
--- a/docs/examples/dashboard/example.js
+++ b/docs/examples/dashboard/example.js
@@ -29,7 +29,7 @@ function setDrawerPosition(position){
       var $container = $('.mdb-layout-container')
 
       // once clicked, just do away with responsive marker
-      $container.removeClass('mdb-drawer-open-md')
+      //$container.removeClass('mdb-drawer-open-md')
 
       var $icon = $(this).find('.material-icons')
       if($icon.text() == 'visibility_off'){
diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 954cc36d..141a666b 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -36,6 +36,7 @@
 // Sizing and positioning below here
 //
 // TODO create a mixin for the below that can generate a named set of styles so that you can use multiple drawer sizes i.e. something like mdb-layout-drawer-100, mdb-drawer-fixed-right-100, etc.
+// These should definitely be passed in as args: $mdb-layout-drawer-x-overlay-breakpoint, $mdb-layout-drawer-size
 
 // for left or right drawers, setup widths, heights and positions
 @each $side in (left right) {
@@ -119,6 +120,16 @@
             > .mdb-layout-content {
               margin-#{$side}: $mdb-layout-drawer-size;
             }
+
+            // switch drawer to overlay instead of a content/header push at the pre-configured breakpoint
+            @include media-breakpoint-down($mdb-layout-drawer-x-overlay-breakpoint) {
+              > .mdb-layout-header,
+              > .mdb-layout-content {
+                width: 100%;
+                margin-#{$side}: 0;
+                overflow: hidden;
+              }
+            }
           }
         }
 
diff --git a/scss/_layout.scss b/scss/_layout.scss
index 3e0c4110..4c3af1b4 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -26,7 +26,7 @@
 // Header layout (fixed top), belongs in a mdb-layout-container
 .mdb-layout-header {
   // FIXME: it would be nice to stick this directly on a .navbar, but .navbars are not flex ready, so this is relegated to be a container at this time.
-  z-index: 2; // above content
+  z-index: 3;
   display: flex;
   width: 100%;
   max-height: 1000px;
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 59363909..e9d4295d 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -1,4 +1,5 @@
 .navbar {
+  margin-bottom: .25rem; // required to provide space for the shadow to render (need is visible in mobile drawer overlay)
   border: 0;
   border-radius: 0;
   @include shadow-2dp();
diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss
index 8a9c21f3..a083ce89 100644
--- a/scss/variables/_drawer.scss
+++ b/scss/variables/_drawer.scss
@@ -2,5 +2,8 @@
 $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
 $mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
 
+// when media-breakpoint-down(md), make the drawer overlay instead of push the content/header (left right)
+$mdb-layout-drawer-x-overlay-breakpoint: md;
+
 // Sizing
 $mdb-layout-drawer-size: 240px !default;