diff --git a/libs/components/src/navigation/side-nav.component.html b/libs/components/src/navigation/side-nav.component.html
index d2e6aeab2b..0a0d4af3ad 100644
--- a/libs/components/src/navigation/side-nav.component.html
+++ b/libs/components/src/navigation/side-nav.component.html
@@ -23,7 +23,11 @@
     (keydown)="handleKeyDown($event)"
   >
     <ng-content></ng-content>
-    <div class="tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3">
+    <!-- 53rem = ~850px -->
+    <!-- This is a magic number. This number was selected by going to the UI and finding the number that felt the best to me and design. No real rhyme or reason :) -->
+    <div
+      class="[@media(min-height:53rem)]:tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3"
+    >
       <bit-nav-divider></bit-nav-divider>
       @if (data.open) {
         <ng-content select="[slot=footer]"></ng-content>