diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index e9d6b598..8e94b426 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -49,9 +49,24 @@ export const Header = (props: Props) => {
   const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
   const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
   // effects
+
+  let windowScrollTop = 0
+
   createEffect(() => {
+    const mainContent = document.querySelector('.main-content')
+
+    if (fixed() || modal() !== null) {
+      windowScrollTop = window.scrollY
+      mainContent.style.marginTop = `-${windowScrollTop}px`
+    }
+
     document.body.classList.toggle('fixed', fixed() || modal() !== null)
     document.body.classList.toggle(styles.fixed, fixed() && !modal())
+
+    if (!fixed() && !modal()) {
+      mainContent.style.marginTop = ''
+      window.scrollTo(0, windowScrollTop)
+    }
   })
 
   // derived
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 0e6e02e6..fff35a04 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -565,7 +565,6 @@ astro-island {
   min-height: 300px;
   padding-top: 100px;
   position: relative;
-  transition: all 1s ease;
 }
 
 .main-content--no-padding {