diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 0204787e..8e69a25d 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -117,22 +117,26 @@
         @each $side in (left right) {
 
           &.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
-            // 1. Push - drawer will push the header and content
-            > .mdb-layout-header {
-              width: calc(100% - #{$mdb-layout-drawer-size});
-              margin-#{$side}: $mdb-layout-drawer-size;
+
+            // 1. Push - drawer will push the header and content (default behavior)
+            &,
+            &.mdb-drawer-push {
+              > .mdb-layout-header {
+                width: calc(100% - #{$mdb-layout-drawer-size});
+                margin-#{$side}: $mdb-layout-drawer-size;
+              }
+
+              > .mdb-layout-drawer {
+                transform: translateX(0);
+              }
+
+              > .mdb-layout-content {
+                margin-#{$side}: $mdb-layout-drawer-size;
+              }
             }
 
-            > .mdb-layout-drawer {
-              transform: translateX(0);
-            }
-
-            > .mdb-layout-content {
-              margin-#{$side}: $mdb-layout-drawer-size;
-            }
-
-            // 2. Overlay - drawer will overlay content/header push at the pre-configured breakpoint
-            @include media-breakpoint-down($mdb-layout-drawer-x-overlay-breakpoint) {
+            // 2. Overlay - drawer will overlay content/header at the pre-configured breakpoint OR if marked as mdb-drawer-overlay
+            @include media-breakpoint-down-or($mdb-layout-drawer-x-overlay-breakpoint, "&.mdb-drawer-overlay") {
               > .mdb-layout-header,
               > .mdb-layout-content {
                 width: 100%;
@@ -142,6 +146,12 @@
             }
           }
         }
+      }
+
+
+
+      // top bottom
+      #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
 
         // mdb-drawer-fixed-(top and bottom) styles
         @each $side in (top bottom) {
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 04ae9e60..e0cfbbfb 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -1,4 +1,5 @@
 @import "mixins/utilities";
+@import "mixins/breakpoints";
 @import "mixins/animations";
 @import "mixins/type";
 @import "mixins/drawer";
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
new file mode 100644
index 00000000..ffbe5d27
--- /dev/null
+++ b/scss/mixins/_breakpoints.scss
@@ -0,0 +1,34 @@
+// case where behavior is responsive, or with a marker class
+@mixin media-breakpoint-down-or($breakpoint, $name) {
+  #{unquote($name)} {
+    @content
+  }
+
+  @include media-breakpoint-down($breakpoint) {
+    @content
+  }
+}
+
+// case where behavior is responsive, or with a marker class
+@mixin media-breakpoint-up-or($breakpoint, $name) {
+  #{unquote($name)} {
+    @content
+  }
+
+  @include media-breakpoint-up($breakpoint) {
+    @content
+  }
+}
+
+// Name of the previous breakpoint, or null
+//
+//    >> breakpoint-next(sm)
+//    xs
+//    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
+//    xs
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+//    xs
+@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
+}