diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 378668a6d0..878a5a9a21 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -181,11 +181,11 @@ class Dropdown extends BaseComponent {
       const popperConfig = this._getPopperConfig()
       const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
 
+      this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
+
       if (isDisplayStatic) {
         Manipulator.setDataAttribute(this._menu, 'popper', 'static')
       }
-
-      this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
     }
 
     // If this is a touch-enabled device we add extra
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index b6184d2ad7..b71058c58e 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -34,6 +34,7 @@
 
   &[data-bs-popper] {
     left: 0;
+    margin-top: $dropdown-spacer;
   }
 }
 
@@ -73,7 +74,7 @@
     top: auto;
     bottom: 100%;
 
-    &.show:not([data-popper-placement]) {
+    &[data-bs-popper] {
       margin-top: 0;
       margin-bottom: $dropdown-spacer;
     }
@@ -90,7 +91,7 @@
     right: auto;
     left: 100%;
 
-    &.show:not([data-popper-placement]) {
+    &[data-bs-popper] {
       margin-top: 0;
       margin-left: $dropdown-spacer;
     }
@@ -110,7 +111,7 @@
     right: 100%;
     left: auto;
 
-    &.show:not([data-popper-placement]) {
+    &[data-bs-popper] {
       margin-top: 0;
       margin-right: $dropdown-spacer;
     }
@@ -187,10 +188,6 @@
 
 .dropdown-menu.show {
   display: block;
-
-  &:not([data-popper-placement]) {
-    margin-top: $dropdown-spacer;
-  }
 }
 
 // Dropdown section headers