diff --git a/app/assets/javascripts/discourse/app/mixins/card-contents-base.js b/app/assets/javascripts/discourse/app/mixins/card-contents-base.js
index d72fb5b4573..0a996f8056a 100644
--- a/app/assets/javascripts/discourse/app/mixins/card-contents-base.js
+++ b/app/assets/javascripts/discourse/app/mixins/card-contents-base.js
@@ -5,7 +5,7 @@ import afterTransition from "discourse/lib/after-transition";
 import DiscourseURL from "discourse/lib/url";
 import Mixin from "@ember/object/mixin";
 import { escapeExpression } from "discourse/lib/utilities";
-import outletHeights from "discourse/lib/header-outlet-height";
+import headerOutletHeights from "discourse/lib/header-outlet-height";
 import { inject as service } from "@ember/service";
 
 export default Mixin.create({
@@ -212,7 +212,10 @@ export default Mixin.create({
               }
             }
 
-            position.top -= $("#main-outlet").offset().top - outletHeights();
+            position.top -= this._calculateTopOffset(
+              $("#main-outlet").offset(),
+              headerOutletHeights()
+            );
             if (isFixed) {
               position.top -= $("html").scrollTop();
               //if content is fixed and will be cut off on the bottom, display it above...
@@ -261,6 +264,13 @@ export default Mixin.create({
     });
   },
 
+  // some plugins/themes modify the page layout and may
+  // need to override this calculation for the card to
+  // position correctly
+  _calculateTopOffset(mainOutletOffset, outletHeights) {
+    return mainOutletOffset.top - outletHeights;
+  },
+
   _hide() {
     if (!this.visible) {
       $(this.element).css({ left: -9999, top: -9999 });