diff --git a/docs/css/custom.css b/docs/css/custom.css
index 6489f2f00..c09c2be37 100644
--- a/docs/css/custom.css
+++ b/docs/css/custom.css
@@ -174,6 +174,9 @@
 header.md-header {
   z-index: 900 !important;
 }
+.md-sidebar {
+  z-index: 1000 !important;
+}
 .md-overlay {
   z-index: 950 !important;
 }
diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index 7fc85fb25..b547e20b2 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -5,4 +5,15 @@
 <a href="{{ '../' ~ base_url }}">
     <strong>Click here to go to latest.</strong>
 </a>
-{% endblock %}
\ No newline at end of file
+<script>
+    // A hacky way to recalculate positions of elements when the outdated banner is shown/hidden
+    new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.attributeName === "hidden") {
+                document.body.style.border = '1px solid transparent';
+                setTimeout(function() { document.body.style.border = undefined; }, 1);
+            }
+        });
+    }).observe(document.querySelector("[data-md-component=outdated]"), { attributes: true });
+</script>
+{% endblock %}