diff --git a/scss/sidebar/_sidebar-narrow.scss b/scss/sidebar/_sidebar-narrow.scss
index e3202d8ee..ffc3711f4 100644
--- a/scss/sidebar/_sidebar-narrow.scss
+++ b/scss/sidebar/_sidebar-narrow.scss
@@ -59,14 +59,20 @@
   }
 }
 
+.sidebar-narrow,
+.sidebar-narrow-unfoldable {
+  @include media-breakpoint-up($mobile-breakpoint) {
+    &:not(.sidebar-end):not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
+    }
+    &.sidebar-end:not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
+    }
+  }
+}
+
 .sidebar-narrow {
   @extend %sidebar-narrow;
-  &:not(.sidebar-end) ~ * {
-    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-  &.sidebar-end ~ * {
-    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
 
   .nav-link {
     overflow: hidden;
@@ -76,13 +82,6 @@
 .sidebar-narrow-unfoldable {
   position: fixed;
 
-  &:not(.sidebar-end) ~ * {
-    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-  &.sidebar-end ~ * {
-    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-
   &:not(:hover) {
     @extend %sidebar-narrow;
   }
diff --git a/scss/sidebar/_sidebar.scss b/scss/sidebar/_sidebar.scss
index 389ef0668..fb3e1b071 100644
--- a/scss/sidebar/_sidebar.scss
+++ b/scss/sidebar/_sidebar.scss
@@ -69,13 +69,13 @@
       &:not(.sidebar-end){
         @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
-          --#{$prefix}sidebar-occupy-start: 0;
+          --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line declaration-no-important
         }
       }
       &.sidebar-end {
         @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
-          --#{$prefix}sidebar-occupy-end: 0;
+          --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line declaration-no-important
         }
       }
     }
@@ -119,7 +119,7 @@
       @include ltr-rtl("left", 0);
       @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
       ~ * {
-        --#{$prefix}sidebar-occupy-start: 0 !important;  // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line declaration-no-important
       }
     }
 
@@ -127,7 +127,7 @@
       @include ltr-rtl("right", 0);
       @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
       ~ * {
-        --#{$prefix}sidebar-occupy-end: 0 !important;  // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line declaration-no-important
       }
     }
 
@@ -157,7 +157,7 @@
     &:not(.sidebar-end) {
       @include ltr-rtl("left", 0);
       ~ * {
-        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line declaration-no-important
       }
 
       &:not(.show) {
@@ -167,7 +167,7 @@
     &.sidebar-end {
       @include ltr-rtl("right", 0);
       ~ * {
-        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line declaration-no-important
       }
 
       &:not(.show) {